<el-tree
:data="treeList"
:props="treeProps"
show-checkbox
node-key="id"
:default-checked-keys="defkey"
style="padding: 0 20px"
ref="treeRef"
@check="handleCheck"
default-expand-all
check-on-click-node
:checkStrictly="checkStrictly"
></el-tree>
初始设置checkStrictly为true,让父子不关联,因为我这里接口反显的时候会把父的信息也反显过来,关联了就会把父的所有子级全部勾选中
在调完反显接口后将checkStrictly设成false,让父子关联,然后再把数据赋给chooseList,chooseList为初始化当前选中的数据
handleCheck(item, val) {
console.log(val, "val.checkedNodes")
this.chooseList = [...val.checkedNodes, ...val.halfCheckedNodes];
console.log(this.chooseList, "this.chooseList")
},
然后将全选的和半选的放进一个数组里,就能拿到实现我们要的, 获取当前被选中的节点,以及父节点(祖节点)了
这里最大的问题就是反显的问题了,一开始我设置checkStrictly为false,然后在拿父祖的信息毫无
问题,以为轻松解决了,试了几遍就发现反显的时候因为返回了父的信息,所以会把所有的子项全
部选中,这个时候就要动态的处理下checkStrictly的值了
这个时候想到了看到的一篇文章里面说的
在拿到后端传回的父子数据渲染页面时,我们希望不要关联。checkStrictly = true
页面渲染完成,和用户交互时,我们希望关联。checkStrictly = false