树组件默认展开
刀刀
0字
0分钟
2026/8/16
用户要求树组件默认展开，一般树结构都会有默认展开、指定展开的 API ，查阅官方文档，果不其然可以使用 defaultExpandAll 字段，设置为 true 即可。
试用一下：
jsx
<a-tree
checkable // 显示多选框
@check="onCheck"
:treeData="membersTree"
:defaultExpandAll='true'
@expand="onExpand"
/>刷新项目后查看效果，发现并没有用。
解决方案
继续翻阅文档，发现个属性，换一种思路，默认展开全部树节点 === 展开指定树节点字段中设置全部的节点 id ，该思路成立。把上方代码修改一下：
jsx
<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> 刷新页面查看效果，发现能够默认展开全部的树节点。
贡献者
duyidao 刀刀
v_duyilin