<template>
<a-button @click="expandHandle">点击</a-button>
<a-tree ref="tree" :tree-data="treeData"
:expanded-keys.sync="expandedKeys" :autoExpandParent="defaultExpandAll"
@select="handleChildNodeCode" :defaultExpandAll="defaultExpandAll">
</a-tree>
</template>
<script>
const treeData = [
{
title: '0-0',
key: '0-0',
children: [
{
title: '0-0-0',
key: '0-0-0',
children: [
{ title: '0-0-0-0', key: '0-0-0-0' },
{ title: '0-0-0-1', key: '0-0-0-1' },
{ title: '0-0-0-2', key: '0-0-0-2' },
],
},
{
title: '0-0-1',
key: '0-0-1',
children: [
{ title: '0-0-1-0', key: '0-0-1-0' },
{ title: '0-0-1-1', key: '0-0-1-1' },
{ title: '0-0-1-2', key: '0-0-1-2' },
],
},
{
title: '0-0-2',
key: '0-0-2',
},
],
},
{
title: '0-1',
key: '0-1',
children: [
{ title: '0-1-0-0', key: '0-1-0-0' },
{ title: '0-1-0-1', key: '0-1-0-1' },
{ title: '0-1-0-2', key: '0-1-0-2' },
],
},
{
title: '0-2',
key: '0-2',
},
];
export default({
data() {
return {
treeData,
expandedKeys: [],
keys:[],
defaultExpandAll: false,
}
},
mounted(){
let keys = this.getTreeKeys(treeData)
this.keys = keys
},
methods:{
getTreeKeys(treeObj, keys = []) {
const childrenData = [];
for (let i = 0; i < treeObj.length; i++) {
if(treeObj[i].children){
keys.push(treeObj[i].key);
}
if (treeObj[i].children && treeObj[i].children.length) {
childrenData.push(...treeObj[i].children);
}
}
if (childrenData.length) {
return this.getTreeKeys(childrenData, keys);
} else {
return keys;
}
},
expandHandle() {
this.defaultExpandAll = !this.defaultExpandAll;
if(this.defaultExpandAll){
this.expandedKeys = this.keys
}else {
this.expandedKeys = []
}
}
}
})
</script>
antdv(a-tree) 点击展开收起功能
最新推荐文章于 2024-09-07 16:06:50 发布