【定制需求】el-tree 树形控件实现：每级可单独选择，选择父级不选中子集，子集全部选中不自动选中父级，手写按钮可支持子集全选，以及取消子集全选，el-tree 树形控件取消父子级联动选择

背景：el-tree 树形控件实现：每级可单独选择，选择父级不选中子集，子集全部选中不自动选中父级，手写按钮可支持子集全选以及取消子集全选，el-tree 树形控件取消父子级联动选择，父级子集可随意选择

在网上找了很多资料也没有找到实现的效果，不知道是搜索的不对还是什么情况
以下是根据自己的思路手撸的一个效果

实现思路

使用el-tree实现树形结构效果，然后内嵌el-checkbox实现任意等级多选单选，在使用按钮操作实现子集全选反选

实现效果

el-tree 树形控件实现：每级可单独选择，选择父级不选中

代码

HTML代码

  <!-- 使用Element UI的el-tree组件展示树形结构数据，支持多选和操作子节点 -->
        <el-tree :data="treeData" node-key="id" :expand-on-click-node="false" highlight-current :props="treeProps">
            <!-- 自定义节点内容显示方式 -->
            <span class="custom-tree-node"  slot-scope="{ node, data }">
                <!-- 使用el-checkbox组件实现节点的多选功能 -->
                <el-checkbox :label="data.id" v-model="selectedIds" @change="handleCheckboxChange(data.id)">{{ node.label }}</el-checkbox>
                <!-- 当节点有子节点时，显示全选和取消全选按钮 -->
                <span v-if="hasChildren(data)">
                    <el-button type="text" size="mini" @click="selectAllChildren(data)">
                        全选子集
                    </el-button>
                    <el-button type="text" size="mini" @click="invertChildrenSelection(data)">
                        取消全选
                    </el-button>
                </span>
            </span>
        </el-tree>

js代码

<script>
export default {
    data() {
        return {
            // 树形结构的数据源
            treeData: [
                // 示例数据
            ],
            // 已选中节点的ID集合
            selectedIds: [],
            // 定义树形结构中子节点和标签的属性名
            treeProps: {
                children: 'children',
                label: 'name'
            },
        };
    },
    methods: {
        // 处理复选框选中状态变化的事件
        handleCheckboxChange(id) {
            // 根据需要实现checkbox变化逻辑
        },
        // 判断节点是否拥有子节点
        hasChildren(data) {
            return data.hasOwnProperty('children') && data.children.length > 0;
        },
        // 选中当前节点的所有子节点
        selectAllChildren(items) {
            const childIds = this.collectChildIdsRecursive(items.children);
            this.selectedIds = [...new Set([...this.selectedIds, ...childIds])];
        },
        // 取消选中当前节点的所有子节点
        invertChildrenSelection(items) {
            const childIds = this.collectChildIdsRecursive(items.children);
            this.selectedIds = this.selectedIds.filter(id => !childIds.includes(id));
        },
        // 递归收集节点及其子节点的ID
        collectChildIdsRecursive(items, result = []) {
            items.forEach(item => {
                result.push(item.id);
                if (item.children) this.collectChildIdsRecursive(item.children, result);
            });
            return result;
        },
    },
};
</script>

css代码

<style lang="scss" scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
}
</style>

完整代码

<template>
    <div class="variable_all height100">
        <!-- 使用Element UI的el-tree组件展示树形结构数据，支持多选和操作子节点 -->
        <el-tree :data="treeData" node-key="id" :expand-on-click-node="false" highlight-current :props="treeProps">
            <!-- 自定义节点内容显示方式 -->
            <span class="custom-tree-node"  slot-scope="{ node, data }">
                <!-- 使用el-checkbox组件实现节点的多选功能 -->
                <el-checkbox :label="data.id" v-model="selectedIds" @change="handleCheckboxChange(data.id)">{{ node.label }}</el-checkbox>
                <!-- 当节点有子节点时，显示全选和取消全选按钮 -->
                <span v-if="hasChildren(data)">
                    <el-button type="text" size="mini" @click="selectAllChildren(data)">
                        全选子集
                    </el-button>
                    <el-button type="text" size="mini" @click="invertChildrenSelection(data)">
                        取消全选
                    </el-button>
                </span>
            </span>
        </el-tree>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 树形结构的数据源
            treeData: [
                // 示例数据
            ],
            // 已选中节点的ID集合
            selectedIds: [],
            // 定义树形结构中子节点和标签的属性名
            treeProps: {
                children: 'children',
                label: 'name'
            },
        };
    },
    methods: {
        // 处理复选框选中状态变化的事件
        handleCheckboxChange(id) {
            // 根据需要实现checkbox变化逻辑
        },
        // 判断节点是否拥有子节点
        hasChildren(data) {
            return data.hasOwnProperty('children') && data.children.length > 0;
        },
        // 选中当前节点的所有子节点
        selectAllChildren(items) {
            const childIds = this.collectChildIdsRecursive(items.children);
            this.selectedIds = [...new Set([...this.selectedIds, ...childIds])];
        },
        // 取消选中当前节点的所有子节点
        invertChildrenSelection(items) {
            const childIds = this.collectChildIdsRecursive(items.children);
            this.selectedIds = this.selectedIds.filter(id => !childIds.includes(id));
        },
        // 递归收集节点及其子节点的ID
        collectChildIdsRecursive(items, result = []) {
            items.forEach(item => {
                result.push(item.id);
                if (item.children) this.collectChildIdsRecursive(item.children, result);
            });
            return result;
        },
    },
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
}
</style>