1. Parent-child upper and lower levels
HTML:
<el-tree v-if="permission.length > 0" :data="permission" :props="props" :show-checkbox="true" expand-on-click-node @check="handleCheck" default-expand-all > default-expand-all: Expand all by default; expand-on-click-node: Click to expand/contract; :show-checkbox="true": Show the check box;
JS:
permission: [], // Data obtained by the backend
props: {
children: 'menu', // The root node contains the fields of all child nodes
label: 'title' //Root node title field
},
2. Multi-level
To change this tree structure to a three-level structure, you need to process the data to ensure that the children attribute of each node contains the child nodes of the next level. Here is a sample code that shows how to change the tree structure to three levels:
HTML:
<template>
<div>
<el-tree
v-if="permission.length > 0"
:data="permission"
:props="props"
:show-checkbox="true"
expand-on-click-node
@check="handleCheck"
default-expand-all
>
</el-tree>
</div>
</template>
JS:
<script>
export default {
data() {
return {
permission: [], // Data obtained by the backend
props: {
children: 'children', // The root node contains the fields of all child nodes
label: 'title' //Root node title field
}
};
},
methods: {
handleCheck(checkedNodes) {
// Handle the node checkbox event, you can get the selected node information here
console.log('Selected nodes:', checkedNodes);
}
},
async fetchData() {
// Get tree data from backend
try {
// Replace the following code to get data from the backend
// const response = await axios.get('/api/getPermissionData');
// this.permission = response.data;
// Simulate backend data, the tree structure contains three levels
// That is, the data passed in from the background must have title and children fields, and children is a List<List<Entity>> collection
this.permission = [
{
title: 'Level 1',
children: [
{
title: 'Level 1-1',
children: [
{ title: 'Level 3 1-1-1' },
{ title: 'Level 3 1-1-2' }
]
},
{ title: 'Level 1-2' }
]
},
{
title: 'Level 2',
children: [
{ title: 'Level 2-1' },
{
title: 'Second Level 2-2',
children: [
{ title: 'Level 3 2-2-1' }
]
}
]
}
];
} catch (error) {
console.error('Failed to obtain tree data:', error);
}
},
async created() {
// Get tree data after component creation
this.fetchData();
}
};
</script>
3. Multiple selection box
<el-tree
v-if="menu.length > 0"
:data="menu"
:props="props"
:show-checkbox="true"
node-key="id"
expand-on-click-node
@check="handleCheck"
default-expand-all
:default-checked-keys="checkedNodes"
>
Among them: node-key="id" represents a unique identifier, and the id field exists in the menu data as a unique identifier
checkedNodes: []
props: {
children: 'menu',
label: 'title'
},
menu: [],
handleCheck(checkNode) {
const nodeId = checkNode.id
console.log("id: " + nodeId)
const index = this.checkedNodes.indexOf(nodeId)
if (index !== -1) {
// If the node ID already exists in the array, it means unchecking it and removing it.
this.checkedNodes.splice(index, 1);
// When unchecked, all child nodes are cancelled.
this.uncheckChildren(checkNode);
} else {
// Otherwise, add the node ID to indicate check
this.checkedNodes.push(nodeId);
// Recursively select child nodes
this.checkChildren(checkNode)
}
console.log(this.checkedNodes)
},
// Recursively select child nodes
checkChildren(node) {
if (node.menu & amp; & amp; node.menu.length > 0) {
// Traverse child nodes and check recursively
for (const child of node.menu) {
const childIndex = this.checkedNodes.indexOf(child.id);
if (childIndex === -1) {
// If the child node's ID does not exist in the array, add it
this.checkedNodes.push(child.id);
}
this.checkChildren(child); // Recursively process the child nodes of the child node
}
}
},
// When unchecked, all child nodes are cancelled.
uncheckChildren(node) {
if (node.menu & amp; & amp; node.menu.length > 0) {
// Traverse child nodes and uncheck recursively
for (const child of node.menu) {
const childIndex = this.checkedNodes.indexOf(child.id);
if (childIndex !== -1) {
// If the ID of the child node exists in the array, uncheck it
this.checkedNodes.splice(childIndex, 1);
}
this.uncheckChildren(child); // Recursively process the child nodes of the child node
}
}
},
4. Add the selected root node at the top
The HTML part remains unchanged and the data collection is changed:
// Parameter part
permission: [],
props: {
children: 'menu',
label: 'title'
},
//Redefine the value obtained through the api
xxxApi.loadData().then(data => {
this.menu = [
{
id: '0',
title: 'Select All',
menu:data
}
]
})
5. Data echo check box
Store the echoed data in the checkedNodes collection in: :default-checked-keys=”checkedNodes” and use node-key=”id” Make sure that the node-key in the default-checked-keys attribute is consistent with the node key name in the data object so that according to The attributes in the node-key of the data are echoed.
<el-tree v-if="permission.length > 0" :data="permission" :props="props" :show-checkbox="true" expand-on-click-node @check="handleCheckB" default-expand-all :default-checked-keys="checkedNodesB" class="custom-tree" style="font-size: 15px" node-key="id" >
xApi.find(param).then(data => {
this.checkedNodesB = data
console.log(this.checkedNodesB)
})
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeHomepage Overview 39759 people are learning the system