526互联

解决element-ui中el-tree懒加载load只执行一次问题

发布时间 2023-12-14 16:07:42作者: 沁猿春
在我们实际开发中，由于后端返回的节点数据量庞大，而用户往往没有要看到所有数据的需求，如果在页面加载中，将页面的所有节点数据都加载出来，无疑是浪费用户宝贵的时间，因此，就有了节点的懒加载的需求，用户想展开哪个节点，我们就给他展示什么数据（异步的从后台发送请求获取当前节点数据然后进行渲染）。

问题描述：

但是，根据官网提供的方法，懒加载只有执行一次，再点击不会重新加载了，这样后端数据有更新，也不会去调接口

解决方案：
采用最少的代码实现，

 <el-table
          ref="table"
          :data="data"
          style="width: 100%"
          :height="tableHeight"
          row-key="menuId"
          lazy
          :load="getChildMenus"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          v-loading="loading"
          @expand-change="handleExpandChange"
        >
</el-table>

//点击获取菜单绑定的接口
    handleExpandChange(row, expanded) {
      if (!expanded) {
        let tableRef = this.$refs.table;
        tableRef.store.states.treeData[row.menuId].loaded = false; //设置为false 
        tableRef.store.states.treeData[row.menuId].expanded = false;
      }
    },

//获取菜单绑定得接口
    getChildMenus(tree, treeNode, resolve) {
　　　　//异步接口调用

　　}