ElementUi tree leaf nodes display checkboxes and limit checkboxes

ElementUi tree leaf nodes display check boxes and limit the number of checks



foreword

Business needs:

  • Only child nodes have checkboxes
  • tree tree 最多选 5个, the rest are displayed as禁用状态

1. Child node display check box

as the picture shows:

insert image description here
Looking at the parsed tree structure code, we know that there 叶子节点is only a separate classlogo is-leaf, and if it is a separate operation 叶子节点, we can start with this logo;

Hide the root node and show the leaf nodes

<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>

2. Limit the number of ticks

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

1. The tree leaf section can be checked

  • Use recursion to process tree tree data

The code is as follows (example):

 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;
}
  • Get the information of the currently selected node
    using the method, accepting two parameters tree:check
    • dataThe object corresponding to this node in the array passed to the property
    • The current selected state object of the tree, including attributes:
      • checkedNodes: The current 被选中的节点array
      • checkedKeys: the current 被选中的节点array keyof
      • halfCheckedNodes: The current 半选中的节点array
      • halfCheckedKeys : the current 半选中的节点array keyof

2. Update the state of the checkbox

The code is as follows (example):

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);
                }
            }
        })
    }
}

full code

<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>

Guess you like

Origin blog.csdn.net/weixin_48353638/article/details/129750973