ant-design-vue中default-expand-all无效的问题

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

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

解决: 在渲染组件的时候先判断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)
    }
}
// ...

ant-design-vue中default-expand-all无效的问题_第1张图片

你可能感兴趣的:(前端UI)