一劳永逸！两种方法解决Element Plus懒加载只执行一次的问题

2023-11-27 17:19:09

Element Plus 树形表格懒加载只执行一次？两种解决方案助你轻松解决

问题：树形表格懒加载遇阻
解决方案 1：监听子节点数据变化
- 使用 watch 监听数据变化
- 重新执行懒加载
解决方案 2：注入父组件方法
- 使用 provide/inject 机制
- 调用父组件懒加载方法
附加技巧
- 使用 load 属性（Element Plus v2）
- 默认展开所有父节点（Element Plus v3）
- 自动重新加载子节点数据
结论
常见问题解答

问题：树形表格懒加载遇阻

Element Plus 的树形表格因其强大的功能而受到开发者青睐。然而，当您尝试加载子节点数据时，却可能遇到懒加载只执行一次的问题。这意味着子节点数据无法正确显示。

解决方案 1：监听子节点数据变化

一种解决方法是在父节点组件中使用 watch 方法监听子节点数据的变化。当子节点数据发生变化时，重新执行懒加载。

export default {
  data() {
    return {
      data: [],
    };
  },
  watch: {
    'data.length'(val) {
      if (val > 0) {
        this.$nextTick(() => {
          this.$refs.tree.doLazyLoad();
        });
      }
    },
  },
  mounted() {
    this.$refs.tree.doLazyLoad();
  },
  methods: {
    // 其他方法
  },
};

解决方案 2：注入父组件方法

另一种方法是使用 provide/inject 机制将父节点组件的懒加载方法注入到子节点组件中。然后，在子节点组件中调用父节点组件的懒加载方法来重新加载子节点数据。

export default {
  inject: ['reloadLazy'],
  methods: {
    reloadLazy() {
      this.$refs.tree.doLazyLoad();
    },
  },
};

export default {
  provide() {
    return {
      reloadLazy: this.reloadLazy,
    };
  },
  methods: {
    reloadLazy() {
      this.$refs.tree.doLazyLoad();
    },
  },
};