ElementUi tree leaf nodes display check boxes and limit the number of checks
Article Directory
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:
Looking at the parsed tree structure code, we know that there 叶子节点
is only a separate class
logo 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 parameterstree
:check
data
The 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被选中的节点
arraycheckedKeys
: the current被选中的节点
arraykey
ofhalfCheckedNodes
: The current半选中的节点
arrayhalfCheckedKeys
: the current半选中的节点
arraykey
of
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>