树组件默认展开

刀刀

12/31/2024

0 字

0 分钟

用户要求树组件默认展开，一般树结构都会有默认展开、指定展开的 API ，查阅官方文档，果不其然可以使用 defaultExpandAll 字段，设置为 true 即可。

试用一下：

<a-tree
  checkable // 显示多选框
  @check="onCheck"
  :treeData="membersTree"
  :defaultExpandAll='true'
  @expand="onExpand"
/>

刷新项目后查看效果，发现并没有用。

解决方案

继续翻阅文档，发现个属性，换一种思路，默认展开全部树节点 === 展开指定树节点字段中设置全部的节点 id ，该思路成立。把上方代码修改一下：

<a-tree
  checkable // 显示多选框
  @check="onCheck"
  :treeData="membersTree"
  :defaultExpandAll='true'
  :expandedKeys.sync='iExpandedKeys'
  @expand="onExpand"
/>

<script> // [!code highlight]
export default { 
    methods: { 
        initData() { 
      		getAction(this.url, this.params).then(res => { 
        		if (res.code == 200) { 
          			this.membersTree = res.result 
          			this.iExpandedKeys = this.membersTree.map(item => item.id) // 要保存节点的id
        		} 
      		}) 
    	}, 
    } 
} // [!code highlight]
</script> 

刷新页面查看效果，发现能够默认展开全部的树节点。