Template部分:
<a-button @click="trigger(true)" type="primary">
展开/收起
</a-button>
<a-tree
v-if="treeData.length"
checkable
:defaultExpandAll="defaultExpandAll"
:tree-data="treeData"
v-model="checkedKeys"
/>
Javascript部分:
<script>
export default {
name: "***",
data() {
return {
checkedKeys: [],
defaultExpandAll: false,
// 树数据
treeData: [],
};
},
methods: {
onChange(e) {
const value = e.target.value;
const expandedKeys = dataList
.map((item) => {
if (item.title.indexOf(value) > -1) {
return getParentKey(item.key, gData);
}
return null;
})
.filter((item, i, self) => item && self.indexOf(item) === i);
Object.assign(this, {
expandedKeys,
searchValue: value,
autoExpandParent: true,
});
},
trigger(abs){
console.log(this.defaultExpandAll)
this.getTreeData(abs);
},
getTreeData(abs){
const _t = this;
_t.treeData = []
// 简单模拟异步请求
setTimeout(() => {
_t.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",
},
];
if (abs) {
_t.defaultExpandAll = !_t.defaultExpandAll;
} else {
_t.defaultExpandAll = true;
}
}, 200);
}
},
created() {
this.getTreeData();
},
};
</script>