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

Question

我在 Element UI 中获得了用户项目的 table。由于 Element UI 不适用于 <tr></tr> 我对如何处理这个问题感到有点困惑。 table 的目的是显示用户的项目并对其执行基本的 CRUD 操作。这意味着对于每一行，一个唯一的 ID 应该显示为一个名称，并且对于他们应该让用户 edit/delete 具有唯一 ID 的特定项目的操作。在正常情况下 HTML table 我希望这样：

<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

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

Element UI tables 将 table 数据绑定到主 <el-table> 元素，然后您可以使用 props 指定应该在行中显示的数据.所以我让它与 id 一起工作。我所要做的就是用 _id 的道具定义一个 <el-table-column> 。我的元素 UI table 目前看起来像这样：

<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

编辑按钮应该 link 具有正确的 _id。但是在 table 中执行任何循环以获取与 edit 按钮对应的正确 ID 都会导致该编辑按钮显示两次。这是预期的结果。不幸的是，我似乎无法解决这个简单的问题...任何人都可以帮助我解决这个问题吗？

Answer 1

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

根据 element-ui 文档 (https://element.eleme.io/#/en-US/component/table):

Custom content for table columns. The scope parameter is { 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>

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

How to correctly setup links in an Element UI table row (Should be easy?)

vue.js

vuejs2

element-ui