需求:父节点选中时,子节点全部选中,子节点选中时,父节点不选中,单独点击父节点的节点,只选中父节点,只有选中父节点的checkBox时,子节点全部选中

解决方法

1. 首先将树设置为严格模式:check-strictly="true"
2. 使用@check和@node-click,进行覆写勾选功能

<el-tree
    :check-strictly="true"
    :expand-on-click-node="false"
     @check="((obj, node)=>{checkNode(obj, node, 'tree1')})"
    :data="data"
    :props="defaultProps"
    @node-click="((obj, node, vue)=>{clickNode(obj, node, vue,'tree1')})"
    default-expand-all
    :defaultExpandLevel="Infinity"
    show-checkbox
    highlight-current
    node-key="id"
    ref="tree1"
    >
</el-tree>

//选中节点
checkNode(obj, node, form) {
    let checkedKeys = this.$refs[form].getCheckedKeys();
    let childKeys = this.getChildKeys(obj);
    let index = checkedKeys.indexOf(obj.id);
    if (index !== -1) {
        //选中并且选中子节点
        checkedKeys = checkedKeys.concat(childKeys)
    } else {
        //取消选中并且取消选中子节点
        checkedKeys = checkedKeys.filter(item => childKeys.indexOf(item) === -1);
    }
    this.$refs[form].setCheckedKeys(checkedKeys)
},

 //点击节点
clickNode(obj, node, vue, form) {
    let checkedKeys = this.$refs[form].getCheckedKeys();
    let index = checkedKeys.indexOf(obj.id);
    if (index !== -1) {
        checkedKeys.splice(index, 1);
        //移除子节点
        let childKeys = this.getChildKeys(obj);
        checkedKeys = checkedKeys.filter(item => childKeys.indexOf(item) === -1);
    } else {
        checkedKeys.push(obj.id)
    }
    this.$refs[form].setCheckedKeys(checkedKeys)

},

//获取子节点
getChildKeys(node) {
    let arr = [];
    arr.push(node.id);
    if (node.children != null && node.children.length > 0) {
        for (let n of node.children) {
            arr.push(n.id);
            let childKeys = this.getChildKeys(n);
            arr = arr.concat(childKeys)
        }
    }
    return arr;
},

3.效果