ElementUi tree leaf nodes display checkboxes and limit checkboxes

ElementUi tree leaf nodes display checkboxes and limit the number of checkboxes

Article directory

• ElementUi tree leaf nodes display check boxes and limit the number of checks
• foreword
• 1. Child node display check box
• 2. Limit the number of ticks
• • 1. The tree leaf section can be checked
  • 2. Update the state of the checkbox
• full code

Foreword

Business needs:

• Only child nodes have checkboxes
• tree tree choose up to 5, and the rest will be displayed as disabled

1. Child node display checkbox

as the picture shows:

Looking at the parsed tree structure code, we know that only the leaf node has a separate class identifier is-leaf, if it is a single operation The leaf node can start from this mark;

Hide the root node and show the leaf nodes

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

    /*Not all styles can be selected*/
    .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 checks

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

1.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 & amp; & amp; 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
  Use the check method in tree, accepting two parameters:
  • The object corresponding to this node in the array passed to the data attribute
  • The current selected state object of the tree contains four properties:
    • checkedNodes: an array of currently checked nodes
    • checkedKeys: An array of key of currently checked nodes
    • halfCheckedNodes: an array of currently half-checked nodes
    • halfCheckedKeys : An array of key of currently half-checked nodes

2. Update checkbox status

The code is as follows (example):

updateTreeStatus(checkedKeys, status = false) {<!-- -->
    const treeRef = this. $refs. tree;
    if (treeRef) {<!-- -->
    // tree warehouse
        const treeStore = treeRef.store || {<!-- -->};
        // tree node collection
        const treeNodesMap = treeStore. nodesMap || {<!-- -->};
        Object.keys(treeNodesMap).forEach(key => {<!-- -->
            const item = treeNodesMap[key] || {<!-- -->};
            // Whether it is a leaf node
            if (item.isLeaf) {<!-- -->
            // Update the state of the checkboxes other than the selected node
                if (!checkedKeys.includes(key)) {<!-- -->
                    let data = item.data || {<!-- -->};
                    data.disabled = status;
                    treeRef.setCurrentNode(data);
                }
            }
        })
    }
}

Complete code

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