element-ui中el-tree树节点的级联操作(取消子节点,父节点不变)

首先,这个tree节点操作中,选中了父节点,会默认选中全部子节点,某个子节点没选中,那么所有父节点都为半选状态。

半选状态时,使用this.$refs.tree.getCheckedKeys()是获取不到半选状态节点的id的。

现在需求是:选中父节点,子节点全部选中,取消某个子节点,父节点不变。

 关键点是 @check-change事件和this.$refs.tree.setChecked()方法

@check-change:节点选中状态发生变化时的回调,共三个参数,依次为:传递给 data属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
this.$refs.tree.setChecked:通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性,(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false

 核心代码:

      checkChange(a,b,c){
        console.log(a,b,c);
        b?this.findchildren(a,b):''
      },
      findchildren(current){
          this.$refs.tree.setChecked(current.id,true,true);
          let d=current.children;
          if(d.length>0){
              d.forEach(a =>{
                  this.findchildren(a);
              })
          }
      },

最后效果如图:

猜你喜欢

转载自blog.csdn.net/qq_39648029/article/details/105770513