ant-design-vue树形控件defaultExpandAll无效问题解决方案

Template部分:

<a-button @click="trigger(true)" type="primary">
      展开/收起
    </a-button>
    <a-tree
      v-if="treeData.length"
      checkable
      :defaultExpandAll="defaultExpandAll"
      :tree-data="treeData"
      v-model="checkedKeys"
    />

Javascript部分:

<script>
export default {
  name: "***",
  data() {
    return {
      checkedKeys: [],
      defaultExpandAll: false,
      // 树数据
      treeData: [],
    };
  },
  methods: {
    onChange(e) {
      const value = e.target.value;
      const expandedKeys = dataList
        .map((item) => {
          if (item.title.indexOf(value) > -1) {
            return getParentKey(item.key, gData);
          }
          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true,
      });
    },

    trigger(abs){
      console.log(this.defaultExpandAll)
      this.getTreeData(abs);
    },
    getTreeData(abs){
      const _t = this;
      _t.treeData = []
      // 简单模拟异步请求
      setTimeout(() => {
        _t.treeData = [
        {
          title: "0-0",
          key: "0-0",
          children: [
            {
              title: "0-0-0",
              key: "0-0-0",
              children: [
                { title: "0-0-0-0", key: "0-0-0-0" },
                { title: "0-0-0-1", key: "0-0-0-1" },
                { title: "0-0-0-2", key: "0-0-0-2" },
              ],
            },
            {
              title: "0-0-1",
              key: "0-0-1",
              children: [
                { title: "0-0-1-0", key: "0-0-1-0" },
                { title: "0-0-1-1", key: "0-0-1-1" },
                { title: "0-0-1-2", key: "0-0-1-2" },
              ],
            },
            {
              title: "0-0-2",
              key: "0-0-2",
            },
          ],
        },
        {
          title: "0-1",
          key: "0-1",
          children: [
            { title: "0-1-0-0", key: "0-1-0-0" },
            { title: "0-1-0-1", key: "0-1-0-1" },
            { title: "0-1-0-2", key: "0-1-0-2" },
          ],
        },
        {
          title: "0-2",
          key: "0-2",
        },
        ];

        if (abs) {
          _t.defaultExpandAll = !_t.defaultExpandAll;
        } else {
          _t.defaultExpandAll = true;
        }
      }, 200);
    }
  },
  created() {
    this.getTreeData();
  },
};
</script>
经验分享 程序员 微信小程序 职场和发展