element el-tree的使用

<el-tree
          ref="tree"
          :data="schoolList"
          show-checkbox
          node-key="deptId"
          :default-checked-keys="defaultTreeChecked"
          :props="defaultProps"
          @check="treeClick"
          :check-strictly="systemNodeFlag"       
          >
        </el-tree>

1.设置全部禁用/取消全部禁用

arr = 树 data

//全部设置禁用(查看)
 deepEachNoDisabled(arr){
      arr.forEach(item => {
        this.$set(item, 'disabled', true);
        if (item.children) {
          this.deepEachNoDisabled(item.children)
        }
      });
    },
   //取消禁用(编辑、新增)
 deepEachNoDisabled(arr){
      arr.forEach(item => {
        this.$set(item, 'disabled', false);
        if (item.children) {
          this.deepEachNoDisabled(item.children)
        }
      });
    }, 

2.勾选某一个子节点后，上传时一并提交父节点id

treeClick(data,node){
      let dad =this.$refs.tree.getHalfCheckedKeys()//返回选中子节点的父节点的key
      this.form.schoolIds = dad.concat(node.checkedKeys) //父亲节点数组拼接选中的节点数组
    },

3.父节点半选中状态 回显时默认勾选了所有子节点

1.设置check-strictly默认为flase
check-strictly:在显示复选框的情况下，是否严格的遵循父子不互相关联的做法

 handleUpdate(row) {
      const id = row.id || this.ids
      getInfo(id).then(response => {
        this.form = response.data;
        this.systemNodeFlag = true //先修改为true  父子不互相关联
        this.$nextTick(()=>{
          this.defaultTreeChecked = response.data.schoolIds 
          this.systemNodeFlag = false//设置默认选中的数据后修改为true,不然会影响后面的全选
        })
      });
    },