elementUi表格获取当前行的id,表格路由跳转传id值，进行删除，编辑

小半 • 2022年5月12日下午3:13 • 前端开发 • 阅读 211

表格绑定数据

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