Element UI 테이블 행의 링크를 올바르게 설정하는 방법(간단해야 합니까?)

Element UI 테이블 행의 링크를 올바르게 설정하는 방법(간단해야 합니까?)

Element UI에서 사용자의 프로젝트가 포함된 표를 받았습니다.Element UI는 와 함께 동작하지 않기 때문에<tr></tr>제가 이걸 어떻게 해야 할지 좀 헷갈리네요.이 표의 목적은 사용자의 프로젝트를 표시하고 기본 CRUD 작업을 수행하는 것입니다.즉, 각 행에 대해 하나의 ID가 이름으로 표시되어야 하며, 액션에 대해 사용자가 고유한 ID를 사용하여 특정 프로젝트를 편집/삭제할 수 있어야 합니다.일반 HTML 테이블에서는 다음과 같이 입력합니다.

<table class="table table-hover">
            <thead class="table-header">
                <tr>
                    <th>Name</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr
                    v-for="project in personData"
                    :key="project._id"
                >
                    <td>{{ project._id }}</td>

                    <td>
                        <el-button
                            type="text"
                            size="mini"
                            @click="onLoad"
                        >Load <i class="el-icon-upload2" /></el-button>
                        <router-link
                            :to="{name: 'editproject', params: { id: project._id }}"
                            tag="span"
                        >
                            <el-button
                                type="text"
                                size="mini"
                            > Edit <i class="el-icon-edit" /></el-button>
                        </router-link>
                        <el-button
                            type="text"
                            size="mini"
                            @click="deleteTemplate(project._id)"
                        >Delete <i class="el-icon-delete" /></el-button>
                    </td>
                </tr>
            </tbody>
        </table>

이 코드는 다음 표를 생성합니다.

편집 및 삭제 버튼을 클릭하면 해당 행에 대해 지정된 ID를 가진 편집 경로로 푸시됩니다.

요소 UI 테이블은 테이블 데이터를 메인 테이블에 바인딩합니다.<el-table>요소를 선택한 다음 소품 행에 표시할 데이터를 지정할 수 있습니다.그래서 신분증으로 작업을 했어요내가 해야 할 일은 단지...<el-table-column>을 지지하여_id현재 [Element UI]테이블은 다음과 같습니다.

<el-table
            v-loading="loading"
            :data="personData"
            size="small"
            @cell-mouse-enter="onHover"
        >
            <el-table-column
                label="Name"
                prop="_id"
            >
            </el-table-column>

            <el-table-column
                label="Actions"
                width="280"
            >
                <el-button
                    type="text"
                    size="mini"
                    @click="onLoad"
                >
                    Load
                    <i class="el-icon-upload2" />
                </el-button>

                <router-link
                    :to="{name: 'editproject', params: { id: _id }}"
                    tag="span"
                >
                    <el-button
                        type="text"
                        size="mini"
                    > Edit <i class="el-icon-edit" /></el-button>
                </router-link>

                <el-button
                    type="text"
                    size="mini"
                >
                    Download
                    <i class="el-icon-download" />
                </el-button>
                <el-button
                    type="text"
                    size="mini"
                    @click="onDelete(scope.row.id)"
                >
                    Delete
                    <i class="el-icon-delete" />
                </el-button>
            </el-table-column>
        </el-table>

이 코드는 다음 표를 생성합니다.

편집 버튼은 적절한 버튼과 링크해야 합니다._id그러나 테이블 내에서 실행되어 올바른 ID를 얻기 위한 모든 루프는 다음과 같습니다.edit버튼을 누르면 해당 편집 버튼이 두 번 표시됩니다.그건 예상된 결과야.유감스럽게도 이 쉬운 문제를 해결할 수 없을 것 같습니다.이 문제를 어떻게 해결해야 할지 누가 도와줄 수 있나요?

열의 슬롯을 사용하면 전체 행에 액세스할 수 있습니다.

element-ui 매뉴얼(https://element.eleme.io/#/en-US/component/table):

테이블 열의 사용자 지정 내용입니다.범위 매개 변수는 { row, column, $index}입니다.

    <template>
  <el-table v-loading="loading" :data="personData" size="small" @cell-mouse-enter="onHover">
    <el-table-column label="Name" prop="_id"></el-table-column>
    <el-table-column label="Actions" width="280">
      <template v-slot:default="table">
        <router-link :to="{name: 'editproject', params: { id: table.row._id }}" tag="span">
          <el-button type="text" size="mini">
            Edit
            <i class="el-icon-edit" />
          </el-button>
        </router-link>
      </template>
    </el-table-column>
  </el-table>
</template>

언급URL : https://stackoverflow.com/questions/57644044/how-to-correctly-setup-links-in-an-element-ui-table-row-should-be-easy