ant-design-vue a-tree 樹形控件 default-expand-all 在異步加載數據時無效問題

問題：在用到ant-design-vue中的 a-tree 樹形控件展示菜單列表，以及進行操作列表。需要在加載出列表時，同時展開所有的樹節點

 

使用defaultExpandAll屬性 ，但是一直不生效，template中的代碼如下：

<a-tree
  default-expand-all
  :tree-data="adminMenuList"
  :show-line="true"
>
</a-tree>

script 中的代碼如下：

import { getAdminMenuListApi } from '@/api/admin'
export default {
  data() {
    return {
      adminMenuList: []
    };
  },
  methods: {
    getAdminMenuList() {
      getAdminMenuListApi().then(res => {
        this.adminMenuList = res.data;
      });
    }
  },
  mounted() {
    this.getAdminMenuList();
  }
};

頁面展示：

 

 

 原因：因為default-expand-all屬性是用來設置默認值的，不會動態渲染，初始值adminMenuList的數據是調異步請求獲取的，默認是空數組，在adminMenuList是空數組的時候<a-tree>組件已經渲染了，沒有樹結構節點所以default-expand-all屬性看起來也沒有發揮作用了。

解決：加v-if判斷，數據請求回來之后再去渲染 a-tree 樹形控件

修改之后的代碼：

<a-tree
  default-expand-all
  :tree-data="adminMenuList"
  :show-line="true"
  v-if="!spinning"
>
  <a-spin :spinning="spinning">
</a-tree>

import { getAdminMenuListApi } from '@/api/admin'
export default {
  data() {
    return {
      adminMenuList: [],
      spinning: true
    };
  },
  methods: {
    getAdminMenuList() {
      getAdminMenuListApi().then(res => {
        this.adminMenuList = res.data;
        this.spinning = false;
      });
    }
  },
  mounted() {
    this.getAdminMenuList();
  }

數據返回之前先顯示加載中狀態，返回之后根據spinning的值再渲染 a-tree 組件，問題解決，如下圖