如何在 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>

该代码产生以下结果table https://gyazo.com/6303e97a68bff3a7d260291b76cec499

可以单击编辑和删除按钮，这将推送到具有该行给定 ID 的编辑路由。

Element 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>

该代码产生以下结果table https://gyazo.com/454ca05ce5e39e1bc9e4263b08551e72

编辑按钮应链接到正确的_id。但是在表内执行任何循环来获取与某个对应的正确 idedit按钮导致该编辑按钮显示两次。这是预期的结果。不幸的是，我似乎无法解决这个简单的问题...任何人都可以帮助我解决这个问题吗？

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

根据 element-ui 文档（https://element.eleme.io/#/en-US/component/table 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>