如何在 Element UI 表格行中正确设置链接(应该很简单?) [英] How to correctly setup links in an Element UI table row (Should be easy?)

查看:125
本文介绍了如何在 Element UI 表格行中正确设置链接(应该很简单?)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在 Element UI 中得到了一个包含用户项目的表格.由于 Element UI 不能与 <tr></tr> 一起使用,所以我对如何处理这个问题感到有些困惑.该表的目的是显示用户的项目并对其执行基本的 CRUD 操作.这意味着对于每一行,都应该将唯一 ID 显示为名称,并且对于操作,它们应该让用户编辑/删除具有唯一 ID 的特定项目.在普通的 HTML 表格中,我喜欢这样:

I got a table with the user's projects in Element UI. Since Element UI doesn't work with <tr></tr> I'm a bit confused as how I would go about this. The purpose of the table is to display the user's projects and perform basic CRUD operations on them. That means that for every row a unique ID should be shown as a name, and for the actions they should let the user edit/delete that particular project with the unique ID. In a normal HTML table I'd it like this:

<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 的编辑路由.

The edit and delete buttons can be clicked and that'll push to an edit route with the given ID for that row.

Element UI 表格将表格数据绑定到主 元素,然后您可以使用 props 指定应在行中显示的数据.所以我让它与 id 一起工作.我所要做的就是定义一个带有 _id 属性的 .我的 Element UI 表目前如下所示:

Element UI tables bind the table data to the main <el-table> element and then you can specify the data that should be displayed in the rows with props. So I got it working with the id's. All I had to do was define a <el-table-column> with a prop of _id . My Element UI table currently looks like this:

<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 都会导致该编辑按钮显示两次.这是一个预期的结果.不幸的是,我似乎无法解决这个简单的问题...谁能帮助我解决这个问题?

The edit buttons should link with the proper _id. But any loop performed inside the table to get the correct id corresponded with an edit button results in that edit button shown twice. Which is an expected result. Unfortunately I cannot seem to figure out this easy problem... Can anyone help me with how I should go about this problem?

推荐答案

通过使用列的槽位可以访问整行:

By using the slot of the column you can access the whole row:

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

According to element-ui documentation (https://element.eleme.io/#/en-US/component/table):

表格列的自定义内容.范围参数是 { row, column, $index }

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 表格行中正确设置链接(应该很简单?)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆