Element-ui el-table 树形表格多选

大家平时使用el-table时,想必一定使用过表格里面的多选吧,那么selection-change事件一定很熟悉吧,触发该事件时我们可以获取到所有被选中的数据。

产品需求:

如图所示,点击不同父级下的子级时,想要获取到所有被选中的数据

问题:

在具体场景中使用selection-change事件只能监听到同一父级下的变动,根本无法同时获取到其他父级下的被选中项。

解决办法:

第一步:给el-table绑定ref="table",

第二步:勾选完毕后,点击如图所示右上角的按钮时 ,console.log(this.$refs.table)              //注意:名字要与第一步绑定的名字一致

如图下图所示,为打印出来的数据,由于页面显示屏大小有限,没能给大家截除完成的图片,顺着图中一直往下滑,会看到一个selection属性,selection中的数据为当前父级中被选中项的数据,要想获取到所有父级下的选中项需要进行for循环,这样就可以拿到所需要的数据了。

大家有不清楚的地方,可以随时联系我进行一 一解答。

猜你喜欢

转载自www.cnblogs.com/dreamstartplace/p/12983371.html