Vue.js 如何正确设置元素UI表行中的链接（应该很容易？）

我在元素UI中得到了一个包含用户项目的表。由于元素UI不能与

一起使用，我有点困惑，不知该如何处理。该表的目的是显示用户的项目并对其执行基本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>

该代码生成以下代码

---

编辑按钮应与适当的

\u id

链接。但是，在表内执行任何循环以获得与

edit

按钮对应的正确id，都会导致该edit按钮显示两次。这是一个预期的结果。不幸的是，我似乎无法解决这个简单的问题。。。有人能帮我解决这个问题吗？

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

根据元素ui文档（）：

表列的自定义内容。作用域参数是{row，column，$index}

编辑

使用列的插槽可以访问整行：

根据元素ui文档（）：

表列的自定义内容。作用域参数是{row，column，$index}

编辑

哇，你真是一个安全的人。不知道我怎么会错过。非常感谢男人：-）哇，你是一个安全的人。不知道我怎么会错过。非常感谢，男士：-）

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

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