ElementUI左树右表checkbox的级联

先上效果图,这里打码不影响效果和实现, 我这里表格的数据是点击树的node后触发向后台数据请求,这里刚进来就没有数据。点击树的node后,右边表格就有数据,这些都不本文要实现的目的,本文要实现的是点击左侧的checkbox,右侧的checkbox会被选中,当点击下一个树node时,上一个树node的状态要保持。点击左侧全选框时,右侧所有checkbox会被选中。

 

 

 

 具体思路:

借用this.$refs.taskTable.selection这个数组,如果这个数组中表格某一行的对象,则表格的checkbox会被勾选,所以我往这个数组中添加对象,就会使得表格对应的checkbox被勾选,如果是手动点击表格的checkbox,这个数组中的对象会自动被删除。
由于没有点击到的树node表格数据还没加载出来,所以我在创建这个页面的时候就把node对应表格数据全部获取了出来,这里面的this.idMapping数组就是提前获取到的map,key为树node id,value为表格数据。

具体实现:这是核心代码,不能直接运行






你可能感兴趣的:(Vue学习笔记,elementui,vue.js)