element+vue树状结构

element+vue树状结构

树状结构勾选父级不联动子级，勾选子级联动父级

使用场景:element的树状结构满足不了项目的需求
效果：

1. 父节点选中，其子节点不会全部选中
2. 父节点取消选中，子节点跟随取消
3. 子节点选中，父节点会跟着一起选中
4. 取消子节点选中，父节点不会取消选中

<el-tree
          :data="dataArray"
          show-checkbox
          :default-expand-all="false"
          :render-after-expand="true"
          node-key="key"
          :check-strictly="true"
          ref="tree"
          :default-checked-keys="defaultArr"
          @check="check"
          :props="defaultProps"
></el-tree>

主要参数：

• key(自定义节点的绑定值)
• chek-strictly(取消子父级联动======自定义)
• defaultArr(默认选中)
• check(点击节点复选框执行事件)
• defaultProps（自定义label）

//取消勾选事件
    unChecked(arr){
      //获取自己点的数组
      arr.forEach(item=>{
        //取消此节点的选中
        this.$refs.tree.setChecked(item.key,false);
        if(item.children){
        //判断如果有子级再次执行此方法  传入参数为当前对象的children
          this.unChecked(item.children)
        }
      })
    },
    //勾选事件
    checked(data, bool) {
        //勾选此节点
        this.$refs.tree.setChecked(data.key, true);
        if (data.parentId && data.parentId != "-1") {
          //判断如果当前级别不是最高一级，继续执行此方法
          this.checked(this.$refs.tree.getNode(data.parentId).data, true);
        }
    },
    
    check(data, event) {
      let bo = this.$refs.tree.getNode(data.key).checked;
      //判断当前操作为选中还是取消
      if(bo == true && data.parentId!='-1'){
        //data.parentId!='-1'为本项目内的数据，判断作用:确认当前为第一层级是不执行递归
        this.checked(this.$refs.tree.getNode(data.parentId).data);
      }else{
        if(!bo){
          //排除选中第一层级
          //递归去除子选中节点
          if(data.children){
            this.unChecked(data.children);
          }
        }
      }
    },