elementui 表格数懒加载和添加子级后刷新数据

前言：

做后台管理系统避免不了需要做项目字典管理，字典管理肯定是多级的一个树，所以就需要用的表格懒加载和表格树

    <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          row-key="id"
          border
          lazy
          :load="getChildrens"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
          <el-table-column label="分类名称" property="dictName" align=""> </el-table-column>
          <el-table-column label="字典名称" property="dictValue" align="center"> </el-table-column>
          <el-table-column label="字典编码" property="dictCode" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
              <el-link :underline="false" type="primary" @click="addDictionary(scope.row, 'add')">添加下级 </el-link>
            </template>
          </el-table-column>
        </el-table>

  // 获取顶级数据
  getParentList() {
    const params = {
      current: this.pagination.current,
      size: this.pagination.size,
      querparam: {}
    };
    这里写接口url(params).then(res => {
      if (res.success === true) {
        this.dataToTal = res.data.total;
        this.tableData = res.data.records.map((item: any, index) => {
          item.hasChildren = item.child !== 0 ? true : false; //这里表示是否展示展开下级
          return item;
        });
        this.parentOptions = this.tableData;
      }
    });
  }

  // 获取子级
  getChildrens(tree, treeNode, resolve) {
   
    这里写接口url({ parentId: tree.id }).then(res => {
      if (res.data.length && res.data.length > 0) {
        const data = res.data.map(item => {
          item.hasChildren = item.child !== 0 ? true : false;
          return item;
        });
        resolve(data); // 这里是加载子级数据的必须resolve()
      } else {
        tree.hasChildren = false;
      }
    });
  }

新增/添加/删除分类/分类下的字典（不是第一级）时需要更新列表，这时子级是懒加载的，解决办法就是简单粗暴：1：刷新页面（体验不好，没操作一次页面整体刷新） 2：

// 子级添加/删除/编辑以后更新数据
  refreshRow() {
    this.$set(this.$refs.multipleTable.store.states, 'lazyTreeNodeMap', {});
    this.$set(this.$refs.multipleTable.store.states, 'treeData', {});
  }

这时展开的列表会收起来，可以再次通过点击父级去查看新增/编辑/修改的子级；

3：当然还有更完美的解决办法：记录当前点击的父节点，然后编辑完成以后再根据父节点去重新请求一次子节点，有个方法是默认展开，太麻烦了我就没做。。。。。。