ElementUi tree树叶子节点显示复选框且限制勾选

ElementUi tree树叶子节点显示复选框且限制勾选个数

---

---

前言

业务需求：

• 只有子节点有复选框
• tree树最多选 5个，其余的显示为禁用状态

---

一、子节点展示复选框

如图所示：

查看解析后的树结构代码我们知道，只有叶子节点有单独的class标识is-leaf，如果是单独操作叶子节点则可以从这个标识下手；

隐藏根节点，展示叶子节点

<style scoped lang="scss">
    ::v-deep .el-tree {
        padding-top: 15px;
        padding-left: 10px;

    /*不可全选样式*/
    .el-tree-node {
        .is-leaf + .el-checkbox .el-checkbox__inner {
            display: inline-block;
        }

        .el-checkbox .el-checkbox__inner {
            display: none;
        }
      }
    }
</style>

二、限制勾选个数

<template>
    <el-tree
        :data="treeList"
        ref="tree"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        @check="onTreeCheck"
    >
    </el-tree>
</template>

1.tree树叶子节可勾选

• 使用递归处理tree树数据

代码如下（示例）：

 handleTreeData(tree, arr = []) {
    if (!tree.length) return [];
    for (let item of tree) {
        let node = {...item, children: []};
        if (item.children && item.children.length) {
           node.disabled = true;
        }
        arr.push(node)
        if (item.children && item.children.length) 
        this.handleTreeData(item.children, node.children)
    }
    return arr;
}

• 获取当前选中节点信息
  使用 tree 中 check 方法, 接受两个参数:
  • 传递给 data 属性的数组中该节点所对应的对象
  • 树目前的选中状态对象，包含 四个属性:
    • checkedNodes: 目前被选中的节点所组成的数组
    • checkedKeys: 目前被选中的节点的 key 所组成的数组
    • halfCheckedNodes: 目前半选中的节点所组成的数组
    • halfCheckedKeys : 目前半选中的节点的 key 的数组

2.更新复选框状态

代码如下（示例）：

updateTreeStatus(checkedKeys, status = false) {
    const treeRef = this.$refs.tree;
    if (treeRef) {
    	// tree 仓库
        const treeStore = treeRef.store || {};
        // tree node集合
        const treeNodesMap = treeStore.nodesMap || {};
        Object.keys(treeNodesMap).forEach(key => {
            const item = treeNodesMap[key] || {};
            // 是否是叶子节点
            if (item.isLeaf) {
            	// 更新选中节点之外的复选框状态
                if (!checkedKeys.includes(key)) {
                    let data = item.data || {};
                    data.disabled = status;
                    treeRef.setCurrentNode(data);
                }
            }
        })
    }
}

---

完整代码

<template>
    <el-tree
        :data="treeList"
        ref="tree"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        @check="onTreeCheck"
    >
    </el-tree>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        id: 1,
                        label: '一级 1',
                        children: [{
                            id: 4,
                            label: '二级 1-1',
                            children: [{
                                id: 9,
                                label: '三级 1-1-1'
                            }, {
                                id: 10,
                                label: '三级 1-1-2'
                            }]
                        }]
                    }, {
                        id: 2,
                        label: '一级 2',
                        children: [{
                            id: 5,
                            label: '二级 2-1'
                        }, {
                            id: 6,
                            label: '二级 2-2'
                        }]
                    }, {
                        id: 3,
                        label: '一级 3',
                        children: [{
                            id: 7,
                            label: '二级 3-1'
                        }, {
                            id: 8,
                            label: '二级 3-2'
                        }]
                    }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                treeList: []
            };
        },
        mounted(): void {
            this.treeList = this.handleTreeData(this.list);
        },
        methods: {
            handleTreeData(tree, arr = []) {
                if (!tree.length) return [];
                for (let item of tree) {
                    let node = {...item, children: []};
                    if (item.children && item.children.length) {
                        node.disabled = true;
                    }
                    arr.push(node)
                    if (item.children && item.children.length) this.handleTreeData(item.children, node.children)
                }
                return arr;
            },
            onTreeCheck(data, treeInfo) {
                const checkedKeys = treeInfo.checkedKeys || [];
                const isDisabledOtherNode = checkedKeys.length >= 5;
                this.updateTreeStatus(checkedKeys, isDisabledOtherNode);
            },
            updateTreeStatus(checkedKeys, status = false) {
                const treeRef = this.$refs.tree;
                if (treeRef) {
                    const treeStore = treeRef.store || {};
                    const treeNodesMap = treeStore.nodesMap || {};
                    Object.keys(treeNodesMap).forEach(key => {
                        const item = treeNodesMap[key] || {};
                        if (item.isLeaf) {
                            if (!checkedKeys.includes(key)) {
                                let data = item.data || {};
                                data.disabled = status;
                                treeRef.setCurrentNode(data);
                            }
                        }
                    })
                }
            }


        }
    };
</script>

<style scoped lang="scss">
    ::v-deep .el-tree {
        padding-top: 15px;
        padding-left: 10px;

    /*不可全选样式*/
    .el-tree-node {
        .is-leaf + .el-checkbox .el-checkbox__inner {
            display: inline-block;
        }
    
        .el-checkbox .el-checkbox__inner {
            display: none;
        }
      } 
    }
</style>