a-tree 树的全部展开和收起
ant-design-vue树a-tree需要实现全部展开和全部收起功能实现
this.$refs.tree.store 打印出来的是这样的数据,里面的expanded就是控制展开收起的功能
代码实现:
<div class="expand"> <a-button size="small" @click="expandHandle">{ { expandAll ? "全部收起" : "全部展开" }}</a-button> </div> <div class="func"> <span>name</span> <span>value</span> </div> <a-tree :data="treeData" show-checkbox node-key="id" :default-expand-all="expandAll" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" ref="tree" @check="handleCheck" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{ { node.label }}</span> <span>{ { data.type }}</span> </span> </a-tree>
methods方法 expandHandle() { console.log(this.$refs.tree.store); this.expandAll = !this.expandAll; this.expandNodes(this.$refs.tree.store.root); }, // 遍历树形数据,设置每一项的expanded属性,实现展开收起 expandNodes(node) { node.expanded = this.expandAll; for (let i = 0; i < node.childNodes.length; i++) { node.childNodes[i].expanded = this.expandAll; if (node.childNodes[i].childNodes.length > 0) { this.expandNodes(node.childNodes[i]); } } },