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

待我称王封你为后i 2024-03-26 12:47 23阅读 0赞

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

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

![e626fbb6ed394cf3830a6dbea156824e.png][]

前端代码

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

![a5b33d9a876742bfa257dc40c9e8ac44.png][]

获取这行的数据

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

![b894d4fc5516480b96e00c33d94d0eb2.png][]

2.选中数据

![4519b820a53244ef9bed08c1414f44df.png][]

![ca4d1af125a044f6a23e90a33472a99c.png][]

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

![75a934fe3a6a4387bb483f56dc4e5ae0.png][]

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

[e626fbb6ed394cf3830a6dbea156824e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e736488ca7a74242899f83ca8dd78077.png
[a5b33d9a876742bfa257dc40c9e8ac44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9c34abfaaa9a4518bee4f660ee585888.png
[b894d4fc5516480b96e00c33d94d0eb2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/44fada6cb68a4eb79dcdc8c48380902c.png
[4519b820a53244ef9bed08c1414f44df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f87007a85cc5403696211c25d5fc2049.png
[ca4d1af125a044f6a23e90a33472a99c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8d3437ef23c2410783809d270543607d.png
[75a934fe3a6a4387bb483f56dc4e5ae0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/850cb274a6c74316a5a8c72cbdea9cac.png