Vue+Element中Table懒加载，新增、删除操作后手动更新

Vue+Element中Table懒加载，新增、删除操作后手动更新

今天开发一个自动分类管理系统中行业类型管理，使用table tree 进行节点懒加载，遇到的问题是：使用load 进行懒加载后在tableData中是取不到子节点数据，所以在为某个节点新增了子节点后无法实现刷新，想到使用刷新真个tableData但是感觉不对（刷新整个源数据太浪费资源了，而且体验极差）, 直接上代码吧

废话不多说，先看代码—

html 代码

          <el-table
            :data="tableData"
            style="width: 100%"
            row-key="id"
            lazy
            border
            :height="tableHeight"
            :load="loadNextNode"
            ref="tableDom"
            :expand-row-keys="idArr"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
              prop="typeName"
              label="分类名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="refUserId"
              label="创建人">
            </el-table-column>
            <el-table-column
              prop="dateCreate"
              label="创建日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="updateCreate"
              label="修改日期"
              width="180">
            </el-table-column>
            <el-table-column label="操作" width="280">
              <template slot-scope="scope">
                <el-button type="text" size="small">编辑行业类型</el-button>
                <el-button type="text" size="small" @click="crateIndustryType(scope.row)">创建行业类型</el-button>
                <el-button type="text" size="small" style="color:#ff3e3e" @click="delIndustry(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
  <industry-dialog :industryForm="industryForm" :dialogOptType="dialogOptType" @formCommit="getFormCommit"
                     ref="industryDialog"></industry-dialog>

看这里是所有的table html这个就不多说了，其中需要注意的是:load="loadNextNode" 在点击某一行数据时，会促发这个load 进行懒加载，于是我在这个方法中使用id作为key缓存当前行 treeNode和resolve, 具体操作继续看下面的js 代码

javascript 代码

     data() {
      return {
        tableData: [],
        loadNodeMap: new Map(),
        tableHeight: 0,
        idArr: ['455', '703'], // 设置默认展开行对应的 id (必须配合row-key使用)
      }
    },
   mounted: function () {
    this.$nextTick(() => {
      if(this.$refs.tableDom)
        this.tableHeight = window.innerHeight - this.$refs.tableDom.$el.offsetTop - 48;
    })
  },
    methods: {
       /**
       * table 数据加载
       * @param  params{object} 检索参数
       */
      _tableDataLoading(params = '') {
        this.loading = true;
        // 加载data tree 数据
    },
      // 懒加载
      loadNextNode(tree, treeNode, resolve) {
        const id = tree.id;
        // 将当前操作报存起来
        this.loadNodeMap.set(id, {tree, treeNode, resolve})
        let url = `/industryType/findListByPid?id=${tree.id}`;
        this.$post(url).then(res => {
          if (res.data.code === 200) {
            resolve(res.data.results)
            // 如果数据为空 设置hasChildren为false
            if (res.data.results.length <= 0) tree.hasChildren = false;
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }).catch(err => {
          console.log(err);
        });
      },
      /**
       * 创建行业类型,打开对话框
       * @param currRow{Object}选择的行对象
       * @desc isNode 为行业与类型的标识【0  代表行业   1  代表类型】
       *   pid 为父节点id
       */
      crateIndustryType(currRow) {
        this.selectCurrRow = currRow;
        // 新增数据省略。。。。 我使用的是dialog 提示新增 类型
      },
      /**
       * 获取子组件返回的数据 将其提交到后台保存，同时更新当前子节点
       * @param commitData  表单数据
       * @param dialogOptType 操作类型 【create-industry 创建行业、create-type创建行业类型、edit 编辑行业类型】
       * @param industryData 为需要保存的表单数据
       */
      getFormCommit(commitData, dialogOptType) {
        this.$post('/industryType/save', industryData).then(res => {
          if (res.data.code === 200) {
            this.loadText = msg.add_msg_succ;
            this.loadState = 'success';
            this.$refs.load.manualLoadClose();
            this.$refs.industryDialog.closeDialog();
            if (dialogOptType === 'create-type') {
              this._reRenderChildrenNodeAfterAdd(res.data.results)
            } else {
              this._tableDataLoading()
            }
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }).catch(err => {
          this.loadText = msg.err_msg;
          this.loadState = 'fail';
        });
      },

      /**
       * 在新增类型后根据selectCurrRow的id 获取loadNodeMap 中对应的
       * resolve 进行子节点刷新操作
       * 刷新table 列表
       *@param callbackRow{Array} 执行新增后返回当前节点的子节点数组
       *
       */
      _reRenderChildrenNodeAfterAdd(callbackRow) {
        const {id} = this.selectCurrRow;
        if (this.loadNodeMap.has(id)) {
          const {tree, resolve} = this.loadNodeMap.get(id);
          this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, id, []);
          resolve(callbackRow)
           tree.hasChildren = true
        } else {
          this.selectCurrRow.hasChildren = true
        }
      },
    }

• 1、看上面js 关键操作在于this.loadNodeMap.set(id, {tree, treeNode, resolve}) 在每次点击某一行进行子节点加载的时候都会将当前{tree, treeNode, resolve} 进行map 缓存（意在新增子节点时可以调用resolve）；

• 2、然后在点击右侧的创建行业类型 按钮时，会调用crateIndustryType(currRow) 方法将当前选中行赋值到this.selectCurrRow 再打开新增行业对话框，当点击对话框保存时会促发 getFormCommit(commitData, dialogOptType) 方法提交数据到后台，同时根据dialogOptType判断当前是新增还是编辑

• 3、在新增成功后将后台返回的当前节点的所有子节点数组作为参数调用_reRenderChildrenNodeAfterAdd(callbackRow)；接着该方法会从this.selectCurrRow取到当前选中行的id

• 4、然后根据该id到loadNodeMap获取对应的value(节点【关键是resolve】）， 然后调用resolve(callbackRow) 方法将子节点重新加载到当前选中节点下，这就完成了节点新增和刷新，记得调用这里的this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, id, []); 重置当前id对应的节点， 否则新增后会出现重复节点也会导致id重复错误

• 5、也许你会说如果他不先点击加载子节点，就直接新增子节点呢？那也无所谓，我在新增了子节点后会直接将当前行设置this.selectCurrRow.hasChildren = true 显示一个>即可，让用户意识到添加成功了（其实这个时候当前行下面并没有真正子节点【因为这是懒加载】），只有在点击>才会加载，这里就又回到了上面的第一步了

操作截图

第一次写博客请多多担待

---