vue elemen-ui实现懒加载表格和新增、删除手动刷新

elemen-ui实现懒加载表格时会有新增和删除表格没有刷新的问题，需要我们手动刷新，大致的思路就是在调用load方法时先把父级节点存到一个map中，然后在该刷新的时候去这个map寻找相应的resolve方法调用手动更新视图。
接下来讲一下具体的方法

• 表格懒加载方法

//表格标签里加上lazy :load="load" :tree-props 这三个属性
 <el-table ref="table" v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%" row-key="id" lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChild' }">
 </el-table>
//js里的load方法 先把刷新需要用到的row, treeNode, resolve三个数据存进map里，异步请求回数据后调用resolve方法加载子节点数据
    load(row: any, treeNode: any, resolve: any) {
      let pid = row.id;
      this.loadNodeMap.set(row.id, { row, treeNode, resolve });
      baseService
        .get(this.getDataListURL, {
          page: this.getDataListIsPage ? this.page : null,
          limit: this.getDataListIsPage ? this.limit : null,
          pid,
        })
        .then((res) => {
          if (res.code !== 0) {
            return ui.error(res.msg);
          }
          resolve(res.data.list);
        });
    }

• 删除的手动刷新

    //删除子结点
    async childDeleteHandle(row: any) {
    //先调用删除接口
      await this.deleteHandle(row.id);
      //然后去加载过子节点的map里找到删除节点的父级，重新获取该节点的子节点 并调用resolve方法重新更新视图
      if (this.loadNodeMap.has(row.pid)) {
        const { tree, treeNode, resolve } = this.loadNodeMap.get(row.pid);
        baseService
          .get(this.getDataListURL, {
            page: this.getDataListIsPage ? this.page : null,
            limit: this.getDataListIsPage ? this.limit : null,
            pid: row.pid,
          })
          .then((res) => {
            if (res.code !== 0) {
              return ui.error(res.msg);
            }
            resolve(res.data.list);
          });
      } else {
        this.selectCurrRow.hasChildren = false;
      }
    },

• 新增子节点手动更新 新增页面做了封装，做为懒加载表格的子组件，以下代码先展示父组件里的内容 然后是子组件里的内容

//父组件 点击新增按钮 触发add方法
    add(row: any) {
      this.selectCurrRow = row; //设置当前行
      this.$refs.addOrUpdate.init(); //调用子组件打开新增页面
    },
    //刷新子结点
    reRenderChildrenNode(pid: any) {
      const { id } = this.selectCurrRow;
      if (this.loadNodeMap.has(id)) {
        const { tree, treeNode, resolve } = this.loadNodeMap.get(id);
        baseService
          .get(this.getDataListURL, {
            page: this.getDataListIsPage ? this.page : null,
            limit: this.getDataListIsPage ? this.limit : null,
            pid,          })
          .then((res) => {
            if (res.code !== 0) {
              return ui.error(res.msg);
            }
            resolve(res.data.list);
          });
      } else {
        this.selectCurrRow.hasChildren = true; 
        //如果没有展开过那就给这个父节点hasChildren设为true，让用户自己去触发load方法更新视图
      }
    },
 <!-- 弹窗, 新增 / 修改 新增页面上绑定刷新子节点方法 -->
    <add-or-update ref="addOrUpdate" @refreshDataList="getDataList" @reRenderChildrenNode="reRenderChildrenNode"></add-or-update>
      //  表单提交
    dataFormSubmitHandle() {
      this.$refs["dataFormRef"].validate((valid: boolean) => {
        if (!valid) {
          return false;
        }
        (!this.dataForm.id ? baseService.post : baseService.put)("/base/wmsmodule", this.dataForm).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              if (this.dataForm.pid != 0) {
              //当新增的是子节点是触发手动更新方法
                this.$emit("reRenderChildrenNode", this.dataForm.pid);
              } else {
                this.$emit("refreshDataList");
              }
              this.visible = false;
              this.dataForm.pid = 0;
            }
          });
        });
      });
    }

大概就是这样实现，具体的讲解见下面这篇博文
https://blog.csdn.net/weixin_43768997/article/details/106161074