ant-design-vue树形控件defaultExpandAll无效问题解决方案
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>