如何在 Element UI 表格行中正确设置链接（应该很简单？）

Question

我在 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>元素，然后您可以使用 props 指定应在行中显示的数据。所以我让它与 id 一起工作。我所要做的就是定义一个<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. 但是在表内执行的任何循环以获得与edit按钮对应的正确 id 都会导致该编辑按钮显示两次。这是一个预期的结果。不幸的是，我似乎无法弄清楚这个简单的问题......谁能帮助我解决这个问题？

Answer 1

通过使用列的插槽，您可以访问整行：

根据 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>