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>