表格绑定数据

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐