<template>
<my-tree :tree-data="treeData" @node-click="nodeClick"></my-tree>
</template>
<script>
import myTree from "./component/myTree.vue";
export default {
components: {
myTree,
},
data() {
return {
treeData: [
// { id: 1, name: "一级1" },
// {
// id: 2,
// name: "一级2",
// children: [
// { id: 3, name: "二级2-1" },
// { id: 4, name: "二级2-2" },
// ],
// },
{
id: 5,
name: "一级3",
children: [
{
id: 6,
name: "二级3-1",
children: [
{ id: 7, name: "三级3-1-1" },
{ id: 8, name: "三级3-1-2" },
],
},
{ id: 9, name: "二级3-2" },
{ id: 10, name: "二级3-3" },
],
},
],
};
},
methods: {
nodeClick(val) {
console.log(val);
},
},
};
</script>
<template>
<div class="tree-item">
<div v-for="item in treeData" :key="item.id">
<div class="item-title" @click="nodeClick(item)">
<span>{{ item.name }}</span>
<span v-if="item.children && item.children.length">
[{{ isOpen(item.id) ? "-" : "+" }}]
</span>
</div>
<div
v-if="item.children && item.children.length"
v-show="isOpen(item.id)"
class="item-childen"
>
<my-tree
:treeData="item.children"
@node-click="$emit('node-click', $event)"
></my-tree>
</div>
</div>
</div>
</template>
<script>
export default {
name: "myTree",
props: {
treeData: {
type: Array,
default: () => [],
},
},
data() {
return {
expandedKeys: [], // 当前展开的节点id组成的数组
};
},
methods: {
nodeClick(item) {
this.$emit("node-click", item);
if (item.children && item.children.length) {
let index = this.expandedKeys.indexOf(item.id);
if (index > -1) {
// 如果当前节点id存在数组中,则删除
this.expandedKeys.splice(index, 1);
} else {
// 如果当前节点id不存在数组中,则添加
this.expandedKeys.push(item.id);
}
}
},
isOpen(id) {
// 判断节点id在不在数组中,在则显示,不在则隐藏
return this.expandedKeys.includes(id);
},
},
};
</script>
<style lang="scss" scoped>
.tree-item {
cursor: pointer;
.item-title {
padding: 4px 8px;
&:hover {
background: #eee;
}
}
.item-childen {
padding-left: 20px;
}
}
</style>
https://juejin.cn/post/7056922161788747789 这个帅哥写的很好
重置遍历表单
calculateLevel(arr, initLevel) {
arr.forEach((element) => {
element.show = false;
element.disabled = false;
if (element.children) {
this.calculateLevel(element.children);
}
});
return arr;
},
chongzhi() {
this.calculateLevel(this.testJson);
},