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


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

产品需求:

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

问题:

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

解决办法:

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

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

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

 

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM