elementUi表格获取当前行的id,表格路由跳转传id值,进行删除,编辑
表格绑定数据<el-table :data="tableData"><el-table-column label="通道" prop="id" sortable width="75"></el-table-column></el-table>定义的数据tableData: [{id: 1,flag: true,date: '2016
·
表格绑定数据
<el-table :data="tableData">
<el-table-column label="通道" prop="id" sortable width="75">
</el-table-column>
</el-table>
定义的数据
tableData: [
{
id: 1,
flag: true,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
tag: '家',
},
{
id: 2,
flag: true,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
tag: '公司',
},
获取当前行id
使用scope.row.id获取到id,进行操作
<el-table-column prop="id" label="详情" width="120">
<!-- 删除当前id行 -->
<template slot-scope="scope">
<el-button @click="del(scope.row.id)"></el-button>
</template>
</el-table-column>
路由跳转传id值
该方式是通过 router-link 组件的 to 属性实现,使用该方式传值的时候,需要路由配置路由别名name
{
path:'/home',
name:'Edit_port'
}
<el-table-column prop="id" label="详情" width="120">
<!--路由跳转传id值-->
<template slot-scope="scope">
<router-link :to="{name:'Edit_port',params:{id:scope.row.id}}">编辑</router-link>
</template>
</el-table-column>
更多推荐
已为社区贡献4条内容
所有评论(0)