Element-Ui树形数据懒加载，删除到最后一个空数组不刷新问题

使用elemenui树形删除数据的时候刷新页面，我在网上找了好多方法，要么没用，要么都是部分代码，自己又看不懂，不得不硬着头皮看源码，发现了有个方法可以刷新。
使用elemenui树形删除数据的时候刷新页面。源码里有一个判断，如果刷新的数据等于空，那么不执行刷新方法。所以我们直接使用resolve()来刷新是行不通的。

我在网上找了好多方法，要么没用，要么都是部分代码，自己又看不懂，不得不硬着头皮看源码，发现了有个方法可以刷新。可以从res中获取数据，再把数据清空掉即可

主要代码

return {
	//不知道为什么lazyTreeNodeMap要写在states里边，有时间再研究
      states: {
        lazyTreeNodeMap: {},
      },
}

//如果是空数组，进入这个单独处理删除的方法
if (!dataArray1.length){
//把当前lazyTreeNodeMap节点的tree替换成 空数组（清空）
this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap,tree,{})
//也可以写成dataArray1，因为dataArray1就是空的
//this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap,tree,dataArray1)            
}

完整代码

<template>
  <div class="app-container">
    <div class="selfSearch" ref="selfSearch">
      <div class="search_left">
        <query :params.sync="queryParams" keywordParams="pr_name,is_entity" @finishCommit="getList">
          <el-form slot="form" class="seniorQuery" :model="queryParams" ref="queryForm" size="small" :inline="true"
                   v-show="showSearch" label-width="110px">
            <el-form-item label="编目清单名称" prop="prName">
              <el-input
                v-model="queryParams.prName"
                placeholder="请输入编目清单名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-form>
        </query>
      </div>
      <div class="search_right">
        <!--        <el-checkbox v-model="queryParams.queryChecked" label="显示全部" border @change="checkedChange"></el-checkbox>-->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
          v-hasPermi="['ba:baConserveBoq:add']"
        >新增
        </el-button>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </div>
    </div>

    <!--        <el-table v-if="refreshTable"
                      :data="baConserveBoqList"
                      row-key="id"
                      :default-expand-all="isExpandAll"
                      style="width: 100%; margin-bottom: 20px;"
                      border
                      lazy
                      :select-on-indeterminate="true"
                      :load="load"
                      @sort-change="sortChange"
                      @select="select"
                      @select-all="selectAll"
                      @selection-change="selectionChange" ref="multipleTable"
                      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                      :height="selfHeight" stripe>
            </el-table>-->

    <el-table
      :data="tableData1"
      row-key="id"
      :default-expand-all="isExpandAll"
      style="width: 100%; margin-bottom: 20px;"
      border
      lazy
      :load="load1"
      :select-on-indeterminate="true"
      @sort-change="sortChange"
      @select="select"
      @select-all="selectAll"
      @selection-change="selectionChange" ref="multipleTable"
      :height="selfHeight"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column sortable label="编目清单编码" align="left" prop="prCode"/>
      <el-table-column sortable label="编目清单名称" align="center" prop="prName"/>
      <el-table-column sortable label="单价" align="center" prop="price"/>
      <el-table-column sortable label="计量单位" align="center" prop="measuringUnit"/>
      <el-table-column sortable label="显示顺序" align="center" prop="num"/>
      <el-table-column sortable label="层级" align="center" prop="prLevel">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ba_boq_pr_level" :value="scope.row.prLevel"/>
        </template>
      </el-table-column>
      <el-table-column sortable label="创建时间" align="center" prop="createTime" width="200">
        <template slot-scope="scope">
          <span>{
  { parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column sortable label="状态" align="left" prop="status" width="150">
        <template slot-scope="scope">
          <template v-if="scope.row.status === '0'">
            <el-tag type="success">正常</el-tag>
          </template>
          <template v-else-if="scope.row.status === '1'">
            <el-tag type="danger">禁用</el-tag>
          </template>
        </template>
      </el-table-column>

      <!--  width="240"  align="center"
              class-name="small-padding fixed-width" fixed="right"    -->
      <el-table-column width="240" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['ba:baConserveBoq:edit']"
          >修改
          </el-button>
          <el-button
            size="small"
            type="text"
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
            v-hasPermi="['ba:baConserveBoq:add']"
          >添加下级
          </el-button>
          <el-button
            v-if="scope.row.parentId != 0"
            size="small"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['ba:baConserveBoq:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  懒加载 lazy  -->


    <!-- 添加或修改养护工程量清单对话框 -->
    <el-dialog class="spec-dialog" :title="title" :visible.sync="open" width="70%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="编目编码" prop="prCode">
              <el-input v-if="form.id ==null || form.id ==''" v-model="form.prCode" placeholder="请输入编目编码"/>
              <el-input v-if="form.id !==null&& form.id !==''" v-model="form.prCode"
                        placeholder="请输入编目编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编目名称" prop="prName">
              <el-input v-model="form.prName" placeholder="请输入编目名称"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="单价" prop="price">
              <el-input v-model="form.price" placeholder="请输入单价"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="measuringUnit">
              <el-input v-model="form.measuringUnit" placeholder="请输入计量单位"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="层级" prop="prLevel">
              <el-select v-model="form.prLevel" placeholder="层级" clearable>
                <el-option
                  v-for="dict in dict.type.ba_boq_pr_level"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
                >{
  { dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="num">
              <el-input-number v-model="form.num" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="susp-btn">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>

    <!--      <el-col :span="1" style="display: flex;align-items: center;justify-content: center;cursor: pointer;">
            <div class="folding" @click="toggleCollapse">
              <i v-if="showArrow" class="el-icon-caret-right"></i>
              <i v-else class="el-icon-caret-left"></i>
            </div>
          </el-col>
          <el-col :span="isCollapsed ? 0 : 6">
            <div class="diseaseProcess">

            </div>
          </el-col>-->

  </div>
</template>

<script>

import {
  listBaConserveBoq,
  getBaConserveBoq,
  delBaConserveBoq,
  addBaConserveBoq,
  updateBaConserveBoq, selectParentIdById
} from "@/api/maintain/ba/baConserveBoq";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import log from "@/views/monitor/job/log.vue";

export default {
  name: "BaConserveBoq",
  dicts: ['sys_normal_disable', 'ba_boq_pr_level', 'ba_boq_entity'],
  components: {
    Treeselect
  },
  data() {
    return {
      states: {
        // defaultExpandAll 存在于 expand.js 中，这里不重复添加
        // 在展开行中，expandRowKeys 会被转化成 expandRows，expandRowKeys 这个属性只是记录了 TreeTable 行的展开
        // TODO: 拆分为独立的 TreeTable，统一用法
        expandRowKeys: [],
        treeData: {},
        indent: 16,
        lazy: false,
        lazyTreeNodeMap: {},
        lazyColumnIdentifier: 'hasChildren',
        childrenColumnName: 'children'
      },
      idCounter: 1,
      stagingArea: null,
      dataMap: new Map(),
      dataParentIdArr: [],
      tableData1: [],
      //折叠箭头
      showArrow: true,
      // 自定义折叠
      isCollapsed: false,
      // 自定义高度
      selfHeight: null,
      // 工程量编目清单树选项
      baboqOptions: [],
      // 重新渲染表格状态
      refreshTable: true,
      // 是否展开，默认全部展开
      isExpandAll: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 养护工程量清单表格数据
      baConserveBoqList: [],
      // 养护工程量清单树选项
      baConserveBoqOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      // 查询参数
      queryParams: {
        measuringUnit: null,//单价
        price: null,//单位
        parentId: null,
        prName: null,
        num: null,
        status: null,
        prCode: null,
        prLevel: null,
        remarks: null,
        isEntity: null
      },
      // 保存 id 对应的chilren指针
      childMapById:new Map(),
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        prCode: [
          {required: true, message: "编目编码不能为空", trigger: "blur"}
        ],
        prName: [
          {required: true, message: "编目名称不能为空", trigger: "blur"}
        ],
        isEntity: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.getMyHeight()
  },
  methods: {
    filteredData() {
      // 过滤隐藏的数据
      let dataArray = [];
      for (let i = 0; i < this.tableData1.length; i++) {


      }
      //this.tableData1 = dataArray
    },
    load1(tree, treeNode, resolve) {
      console.log("第一个展开" , tree)
      setTimeout(() => {
        this.dataMap.set(tree.id, {tree,treeNode, resolve});
        let dataArray1 = [];
        for (let i = 0; i < this.baConserveBoqList.length; i++) {
          const item = this.baConserveBoqList[i];
          item.deleted = false;
          //通过id找父集id
          if (tree.id === item.parentId) {
            let num = 0;
            // 查找当前id在父集id中能匹配到数据 当前的hasChildren true
            for (let j = 0; j < this.dataParentIdArr.length; j++) {
              const getParentId = this.dataParentIdArr[j];
              if (item.id === getParentId) {
                num = 1;
              }
            }
            if (num === 1) {
              item.hasChildren = true
            } else {
              item.hasChildren = false
            }
            dataArray1.push(item);
          }
        }
        resolve(dataArray1)
      }, 100)
    },


    async load2(tree, treeNode, resolve) {
      console.log("刷新")
      setTimeout(async () => {
        let dataArray1 = [];
        for (let i = 0; i < this.baConserveBoqList.length; i++) {
          const item = this.baConserveBoqList[i];
          item.hide = false
          //通过id找父集id
          if (tree === item.parentId) {
            let num = 0;
            for (let j = 0; j < this.dataParentIdArr.length; j++) {
              const getParentId = this.dataParentIdArr[j];
              if (item.id === getParentId) {
                num = 1;
              }
            }
            if (num === 1) {
              item.hasChildren = true
            } else {
              item.hasChildren = false
            }
            dataArray1.push(item);
          }
        }

        resolve(dataArray1)
        if (!dataArray1.length){
          this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap,tree,dataArray1)
            
        }
      }, 500)
    },

    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
      this.showArrow = !this.showArrow;
    },
    getMyHeight() {
      this.$nextTick(() => {
        let myHeight = this.$getHeight.getMyHeight(window.getComputedStyle(this.$refs.selfSearch).height)
        this.selfHeight = myHeight + 20
      })
    },
    /** 提示全部*/
    checkedChange(val) {
      this.queryParams.queryChecked = val;
      this.getList()
    },
    /** 查询养护工程量清单列表 */
    async getList() {
      this.$modal.loading('加载中...')
      await listBaConserveBoq(this.queryParams).then(response => {
        this.baConserveBoqList = response.data
        //console.log("数组长度 查询===" + this.baConserveBoqList.length)
        //let dataParentId = [];
        //保存父类id
        this.dataParentIdArr = response.data.map(item=>item.parentId)

        //保存第一层
        let dataArray = [];
        for (let i = 0; i < response.data.length; i++) {
          const item = response.data[i];
          if (item.parentId === "0") {
            const isHasChildren = this.dataParentIdArr.indexOf(item.id)>-1

            item.hide = false
            item.hasChildren = isHasChildren;

            dataArray.push(item);
          }
        }
        this.tableData1 = dataArray;
        this.$modal.closeLoading()
      }).catch(err => {
        this.$modal.closeLoading()
      });
    },
    /** 转换养护工程量清单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.prName,
        children: node.children
      };
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    //排序
    sortChange(column) {
      // 可以打印一下该函数的参数就明白了
      // 下面的if判断根据自己的需要些我后台设置的只能识别desc与asc
      if (column.order === 'descending') {
        this.queryParams.isAsc = 'desc'
      } else {
        this.queryParams.isAsc = 'asc'
      }
      // 排序的字段传给后台
      this.queryParams.orderByColumn = column.prop
      // 传入查询参数，重新查询一次
      this.getList()
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      listBaConserveBoq().then(response => {
        this.baConserveBoqOptions = [];
        const data = {id: 0, prName: '顶级节点', children: []};
        data.children = this.handleTree(response.data, "id", "parentId");
        this.baConserveBoqOptions.push(data);
      });
    },
    // 选中父节点时，子节点一起选中取消
    select(selection, row) {
      const hasSelect = selection.some(el => {
        return row.id === el.id
      })
      if (hasSelect) {
        if (row.children) {
          // 解决子组件没有被勾选到
          this.setChildren(row.children, true)
        }
      } else {
        if (row.children) {
          this.setChildren(row.children, false)
        }
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        parentId: null,
        ancestors: null,
        prName: null,
        num: null,
        status: "0",
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        prCode: null,
        prLevel: null,
        remarks: null,
        isEntity: null,

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      this.getTreeselect();
      if (row != null && row.id) {
        this.form.parentId = row.id;
      }
      // listBaboq().then(response => {
      //   this.baboqOptions = [];
      //   this.baboqOptions = this.handleTree(response.data, "id", "parentId", "children", "0")
      // });
      this.form.status = "0";
      this.form.isEntity = "2";
      this.open = true;
      this.title = "添加养护工程量清单";
    },
    // 选择全部
    selectAll(selection) {
      // tabledata第一层只要有在selection里面就是全选
      const isSelect = selection.some(el => {
        const tableDataIds = this.tableData.map(j => j.id)
        return tableDataIds.includes(el.id)
      })
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.tableData.every(el => {
        const selectIds = selection.map(j => j.id)
        return selectIds.includes(el.id)
      })
      if (isSelect) {
        selection.map(el => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, true)
          }
        })
      }
      if (isCancel) {
        this.tableData.map(el => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, false)
          }
        })
      }
    },

    // 获取到选中的
    selectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.getTreeselect();
      getBaConserveBoq(row.id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改养护工程量清单";
      });
    },


    /** 提交按钮 */
    async submitForm() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          if (this.form.price !== '' && this.form.price !== null && this.form.price !== undefined) {
            if (isNaN(this.form.price) || parseFloat(this.form.price) <= 0) {
              this.$message.error("单价数值不合法!");
              return;  // 值不是数字、小数或正数，停止执行
            }
          }
          if (this.form.id != null) {
            console.log("修改的id——" + this.form.id)
            await updateBaConserveBoq(this.form).then(async response => {
              this.msgSuccess("修改成功");
              this.open = false;
              await this.getList();

              //根据上级数据
              //如果上级是顶层，不校验
              if (this.form.parentId !== '0') {
                const storedData = this.dataMap.get(this.form.parentId);
                await this.load2(this.form.parentId, storedData.treeNode, storedData.resolve)
              }
            });

          } else {
            addBaConserveBoq(this.form).then(async response => {
              this.msgSuccess("新增成功");
              this.open = false;
              await this.getList();

              //console.log("我是本级ID===" + this.form.parentId) //上级id

              //新增不用 下面的
              if (this.form.parentId === '0' || this.form.parentId === null || this.form.parentId === 0) return

              //刷新外部数据（同级）
              //刷新本节点，直接把新数据的父类id 当作id，然后使用
              let newId;
              //应该用 newId 的 父类id，去数据库查询父类id
              await selectParentIdById(this.form.parentId).then(async response => { //父类id就是我的id，用我的id去寻找 我的 父类id
                //console.log("返回的是："+JSON.stringify(response))
                newId = response.data //这是我的父类id ，也就是上级的
              })
              //console.log("调用上级，刷新本级 的 id =="+newId)
              //上级id不可能等于0
              //如果 是第一层新增，不用刷新本层
              if (newId !== '0') {
                //根据上级id，刷新 上级 id （影响本级）
                const storedData3 = this.dataMap.get(newId);
                //刷新本级
                await this.load2(newId, storedData3.treeNode, storedData3.resolve)
              }

              //刷新内部的数据
              //判断是否已经展开
              const storedData4 = this.dataMap.get(this.form.parentId); // 判断自己是否展开
              if (storedData4 !== '' && storedData4 !== null && storedData4 !== undefined) { //如果没有数据，则证明自己没有展开
                //console.log("刷新内部数据====")
                //如果有数据，展开了，刷新下级数据
                await this.load2(this.form.parentId, storedData4.treeNode, storedData4.resolve)
              }
              // console.log(this.tableData1,'data1')
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    async handleDelete(row) {
      await this.$confirm('是否确认删除?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await delBaConserveBoq(row.id);
      }).then(async () => {
        await this.getList();
        const storedData4 = this.dataMap.get(row.parentId);
        storedData4.tree.hasChildren = !!storedData4.treeNode.children.length
        // console.log(storedData4,'storedData4')
        // this.
        await this.load2(row.parentId, storedData4.treeNode, storedData4.resolve);

        await this.msgSuccess("删除成功");
      });
    },

  }
};
</script>

<style scoped>
.spec-dialog /deep/ .el-dialog {
  height: 55% !important;
}

.deleted {
  display: none;
}
</style>