elementUI如何获取table 表格中的数据行数据和每一行的id

表格中有操作按钮的话,获取当前勾选行的数据,大家都知道用slot-scope="scope" 来获取,但如果要实现的功能是在表头上了,那要怎么获取当前前勾选的这一行的数据呢?这时我们可以用表格中提供的@selection-change="handleSelectionChange" 里的 multipleSelection来实现。。

例如要获取这一行的ID,和这一行的数据

elementUI如何获取table 表格中的数据行数据和每一行的id_第1张图片

 前端代码

 this.ids 获取这行ID,this.ids.length 是选择了几行

elementUI如何获取table 表格中的数据行数据和每一行的id_第2张图片

获取这行的数据

1.先定义一个数组来存取

 elementUI如何获取table 表格中的数据行数据和每一行的id_第3张图片

 2.选中数据

elementUI如何获取table 表格中的数据行数据和每一行的id_第4张图片

 

elementUI如何获取table 表格中的数据行数据和每一行的id_第5张图片

3.再从定义的数组中取出这一行的数据

elementUI如何获取table 表格中的数据行数据和每一行的id_第6张图片

 

protected handleSelectionChange(val) {
       this.multipleSelection = val;
       console.log(this.multipleSelection)  // 当前选中的某一行打印出来的结果
  }

 

 

你可能感兴趣的:(idea,vue,elementui,javascript,java)