Ant Design Vue 中 Tree 树形控件 defaultExpandAll 设置无效

最新推荐文章于 2024-07-29 15:00:06 发布

大风车滴呀滴溜溜地转

最新推荐文章于 2024-07-29 15:00:06 发布

阅读量2.7k

点赞数 5

原文链接：https://blog.csdn.net/one_girl/article/details/106024842?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_pa

版权

问题： 在代码中设置了default-expand-all属性树形结构还是没有展开

原因： 因为default-expand-all属性是用来设置默认值的，而初始值treeData通常情况下是需要调异步请求来获取数据的默认是空数组，在treeData是空数组的时候<a-tree>组件已经渲染了，没有树结构节点所以default-expand-all属性看起来也没有发挥作用了。

解决： 在渲染<a-tree>组件的时候先判断treeData数组长度大于0才渲染

<template>
	// ...
	<a-tree v-if="treeData.length > 0" :tree-data="treeData" default-expand-all ></a-tree>
	// ...
</template>

// ...
data() {
	return {
		treeData: []
	}
},
created() {
	this.getDataList()
},
methods: {
	getDataList () {
	  // 模拟异步请求
      setTimeout(function () {
        this.treeData = [
          {
            title: '湖滨银泰集团',
            key: '99232344',
            children: [
              { title: 'in77杭州银泰', key: '99232377' },
              { title: 'in99上海银泰', key: '99232399' },
            ],
          },
        ]
      }, 400)
    }
}
// ...