Requirements:
1. Menu tree radio selection
2. The parent and child nodes are not related and can be checked.
3. Splice the selected nodes into the name echo page according to the parent-child level (if the second level is selected, you need to get the first-level name and splice it together: first-level/second-level)
4. The last level node of the menu tree is not displayed, and when the upper level node is checked, the last level node name is displayed on the page.
5. The name of the echo page can be deleted. When deleting, the menu tree check status must be updated simultaneously, and the last episode node name of the echo page must be cleared.
Rendering:
Code:
<template>
<div>
<!-- Requirements:
1. Menu tree radio selection
2. The parent and child nodes are not related and can be checked.
3. Splice the selected nodes into the name echo page according to the parent-child level (if the second level is selected, you need to get the first-level name and splice it together: first-level/second-level)
4. The last level node of the menu tree is not displayed, and when the upper level node is checked, the last level node name is displayed on the page.
5. The name of the echo page can be deleted. When deleting, the menu tree check status needs to be updated simultaneously.
-->
<center>
<h3>Single choice</h3>
</center>
<div class="treeContent">
<div v-if="checkList.length">
<div class="pp" v-for="item in checkList" :key="item.id">
{<!-- -->{item.menuName}}
<span class="remove" @click="onRemove(item.id)">X</span>
</div>
</div>
</div>
<div class="box">
<el-tree
:data="list"
ref="tree"
show-checkbox
check-strictly
node-key="id"
:props="defaultProps"
@check="onTreeCheck"
></el-tree>
<div class="btn-box">
<div>Button card</div>
<div class="btn-style" v-if="btnList.length">
<p class="btn-item" v-for="(item,index) in btnList" :key="index">{<!-- -->{item.label}}</p>
</div>
</div>
</div>
<center>
<el-button type="primary" @click="clickss" class="btn">OK</el-button>
</center>
</div>
</template>
<script>
export default {
data() {
return {
checkList: [], //The input box displays the selected data
allBtnList: [], //All button information
btnListCopy: [],
btnList: [], //Button information
list: [],
defaultProps: {
children: "children",
label: "label"
},
treeList: [], //menu tree
checkListCopy: []
};
},
mounted() {
this.getData();
},
methods: {
getData() {
let res = [
{
id: 1,
label: "Level 1",
children: [
{
id: 4,
label: "Level 1-1",
fatherID: 1,
children: [
{
id: 9,
label: "Level 3 1-1-1",
fatherID: 4,
nextIsButton: true,
children: [
{
id: 18,
label: "Level 4 button 1-1-1-1",
fatherID: 9
},
{
id: 19,
label: "Fourth level button 1-1-1-2",
fatherID: 9
}
]
},
{
id: 10,
label: "Level 3 1-1-2",
fatherID: 4
}
]
}
]
},
{
id: 2,
label: "Level 2",
children: [
{
id: 5,
label: "Level 2-1",
fatherID: 2,
nextIsButton: true,
children: [
{
id: 14,
label: "Level 3 button 2-1-1",
fatherID: 5
},
{
id: 15,
label: "Third-level button 2-1-2",
fatherID: 5
}
]
},
{
id: 6,
label: "Level 2-2",
fatherID: 2
}
]
},
{
id: 3,
label: "Level 3",
children: [
{
id: 7,
label: "Level 2 3-1",
fatherID: 3
},
{
id: 8,
label: "Level 3-2",
fatherID: 3
}
]
},
{
id: 11,
label: "Level 4",
children: []
}
];
this.filterTree(res);
},
//process tree structure
filterTree(tree) {
tree.forEach(element => {
if (element.nextIsButton) {
//The children under the parent are button information, which is marked by nextIsButton. The button information is stored and the page menu tree does not display buttons and is cleared.
this.allBtnList.push({ id: element.id, btnList: element.children });
element.children = [];
} else if (element.children & amp; & amp; element.children.length) {
//Children under the parent are not button information and have values, and are processed recursively
this.filterTree(element.children);
}
});
this.list = tree;
},
//Click the checkbox
onTreeCheck(data, treeInfo) {
this.checkListCopy = [];
let checkArr = [];
this.btnListCopy = [];
if (treeInfo.checkedKeys.length) {
//Single selection implementation
this.$refs.tree.setCheckedKeys([data.id]);
} else {
//Cancel the currently selected node
this.$refs.tree.setCheckedKeys([]);
}
let thisNode = this.$refs.tree.getNode(data.id);
let keys = [data]; // Get the key value of the selected node
if (thisNode.checked) {
//If the current node is selected
for (let i = thisNode.level; i > 1; i--) {
// There is a parent node above the node, continue to search up, and store the parent nodes associated with the selected node into the keys array.
thisNode = thisNode.parent;
keys.unshift(thisNode.data);
}
}
//Save the id of the selected data and the spliced name
checkArr.push({
id: keys[keys.length - 1].id,
menuName: keys.map(i => i.label).join("/")
});
let checkedNodeList = treeInfo.checkedNodes || [];
let checkedNode = checkedNodeList[checkedNodeList.length - 1] || {};
//Filter out the unchecked data and only take the selected data
checkArr.forEach(item2 => {
if (item2.id == checkedNode.id) {
this.checkListCopy.push({
id: checkedNode.id,
menuName: item2.menuName
});
}
});
//Button menu display
this.allBtnList.forEach(i => {
if (data.id == i.id) {
this.btnListCopy = i.btnList;
}
});
console.log("Button-------", this.btnListCopy);
},
// Sure
clickss() {
this.checkList = this.checkListCopy;
this.btnList = this.btnListCopy;
},
// delete
onRemove(id) {
this.checkList.forEach((i, k) => {
if (i.id == id) {
this.checkList.splice(k, 1);
}
});
const keyList = this.checkList.map(i => i.id);
this.$refs.tree.setCheckedKeys(keyList, true);
this.btnList = [];
}
}
};
</script>
<style scoped>
.treeContent {
width: 300px;
min-height: 30px;
border: 1px solid black;
margin: 20px auto 50px;
padding: 0 10px;
line-height: 30px;
}
.pp {
display: flex;
justify-content: space-between;
}
.remove {
font-size: 14px;
color: brown;
}
.btn {
margin-top: 50px;
}
.box {
display: flex;
justify-content: space-around;
}
.btn-style {
color: blue;
font-size: 14px;
}
</style>