el-tree取消子级不取消父级

  1. 选择父级 自动 选择子级
  2. 选择子级自动选择父级
  3. 取消子级不取消父级


    data() {
        return {
          props: {
                // label: 'title',
                children: "children"
          },
          all_permission:[{
                id:1,
                label: "父级" 
                children:[{
                      label: "子级"
                      parentId: 1, 
               }]
          }]
        };
    },
methods:{
    selectChildren(data) {
        data && data.children && data.children.map(item => {
            this.$refs.permissionNode.setChecked(item.id, true);
            if (data.children) {
                this.selectChildren(item)
            }
        });
    },
    handleCheck(data, { checkedKeys }) {
        // 节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
        //如果为取消
        if (checkedKeys.includes(data.id)) {
            //如果当前节点有子集
            this.selectChildren(data);
        }

    },
handleCheckChange(data, checked, indeterminate) {
    // 节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
    //如果为取消
    if (checked === false) {
        //如果当前节点有子集
        if (data.children) {
            //循环子集将他们的选中取消
            data.children.map(item => {
                this.$refs.permissionNode.setChecked(item.id, false);
            });
        }
    } else {
        //否则(为选中状态)
        //判断父节点id是否为空
        if (data.parentId !== 0) {
            //如果不为空则将其选中
            this.$refs.permissionNode.setChecked(data.parentId, true);
        }
    }

    var check = this.$refs.permissionNode.getCheckedNodes();
    console.log(data, checked, indeterminate,check);
},
}

你可能感兴趣的:(el-tree取消子级不取消父级)