526互联

ant-design-vue tree 通过key递归获取该节点信息

发布时间 2023-04-06 15:50:58作者: Lyn小娜

<template>
<div class="tzgl_wrap">
<a-tree
:tree-data="treeData"
@select="treeSelect"
default-expand-all
>
<template slot="title" slot-scope="{ title }">
<span>{{ title }}</span>
</template>
</a-tree>
</div>
</template>

<script>
import {
MainPageTree
} from '@/api/dwActivityManage'
export default {
components: {
Book
},
data() {
return {
treeData: [],
treeInfo: {},
}
},
mounted() {
this.getTreeData()
},
methods: {
getTreeData() {
MainPageTree().then(res => {
if (res.code == 200) {
this.treeData = res.data
// this.generateList(res.data)
}
})
},
treeSelect(e) {
this.recursiveFilter(this.treeData, e[0])
console.log(this.treeInfo,'======treeInfo')

},
// 通过key 获取树节点信息
recursiveFilter(tree, keys) {
let data = tree.filter(item => item.key == keys)
if (data.length != 0) {
this.treeInfo = data[0]
} else {
tree.map(item => {
if (item.children) {
//递归循环
this.recursiveFilter(item.children, keys)
}
})
}
return data
},
}
}
</script>
————————————————
版权声明：本文为CSDN博主「最初都是小白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Originally_M/article/details/122482167