Los nodos de hoja de árbol de ElementUi muestran casillas de verificación y limitan el número de comprobaciones
Directorio de artículos
prefacio
Necesidades del negocio:
- Solo los nodos secundarios tienen casillas de verificación
- árbol árbol
最多选 5个, el resto se muestran como禁用状态
1. Casilla de verificación de visualización del nodo secundario
como muestra la imagen:
Mirando el código de estructura de árbol analizado, sabemos que 叶子节点solo hay un classlogotipo separado is-leaf, y si es una operación separada 叶子节点, podemos comenzar con este logotipo;
Ocultar el nodo raíz y mostrar los nodos hoja
<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. Limita el número de ticks
<template>
<el-tree
:data="treeList"
ref="tree"
show-checkbox
node-key="id"
:props="defaultProps"
@check="onTreeCheck"
>
</el-tree>
</template>
1. La sección de la hoja del árbol se puede comprobar
- Utilice la recursividad para procesar los datos del árbol del árbol
El código es el siguiente (ejemplo):
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;
}
- Obtenga la información del nodo actualmente seleccionado
utilizando el método, aceptando dos parámetrostree:checkdataEl objeto correspondiente a este nodo en el arreglo pasado a la propiedad- El objeto de estado seleccionado actual del árbol, incluidos
四los atributos:checkedNodes: La被选中的节点matriz actualcheckedKeys: la被选中的节点matriz actualkeydehalfCheckedNodes: La半选中的节点matriz actualhalfCheckedKeys: la半选中的节点matriz actualkeyde
2. Actualizar el estado de la casilla de verificación
El código es el siguiente (ejemplo):
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);
}
}
})
}
}
código completo
<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>