el-table 操作列(编辑or删除) 获取本行相关数据

简单说明:开发的时候,经常会遇到表格后面跟着操作列,一般都是编辑或者删除,那么 就需要获取到 本行数据相关的id或者其他附属信息。ok,下边放代码

//vue el-table的部分代码
<el-table-column width="200" label="操作" align="center">
   <template slot-scope="scope">
      <el-button type="danger" icon="el-icon-delete" circle @click.stop="deleteProById(scope.$index, scope.row)"></el-button>
   </template>
</el-table-column>

  //js 代码

  deleteProjectById(params,row){
  console.log(params)
  console.log(row)
  //proVo 是在 data(){} 全局声明的一个对象 此行代码的意思就是 把Object.assign({}, row)获取到的行数据映射为对象
  this.proVo = Object.assign({}, row)
  console.log(JSON.stringify(this.proVo))
  let objId = this.proVo.proId
  console.log(objId);
  //````其他业务代码省略
  }

 

猜你喜欢

转载自www.cnblogs.com/xuchao0506/p/11753151.html
今日推荐