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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

短暂又灿烂的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值