(精华)2020年10月24日 vue element-ui树形表懒加载数据无法更新问题

第一步:在element中得table加入

:load=“load”

<el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      row-key="Id"
      @selection-change="onSelectChange"
      lazy
      :load="load"
      ref="table"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.dataIndex"
        :width="item.width"
        :label="item.title"
      />
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" @click="handleEdit(row.Id, row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="handleDelete([row.Id], row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

第二步:在load方法中存树形节点

/**
 * 延迟加载
 */
load(tree, treeNode, resolve) {
  const id = tree.Id;
  this.loadNodeMap.set(id, { tree, treeNode, resolve });//存树形节点
  GetTreeDataList({ parentId: tree.Id }).then((response) => {
    response.Data.forEach((element) => {
      element.hasChildren = true;
    });
    resolve(response.Data);
  });
},

第三步:在树形节点数据更新时重新刷新节点

/**
 * 在新增类型后根据selectCurrRow的id 获取loadNodeMap 中对应的
 * resolve 进行子节点刷新操作
 * 刷新table 列表
 *@param callbackRow{Array} 执行新增后返回当前节点的子节点数组
 *
 */
reRenderChildrenNodeAfterAdd() {
  let that = this;
  this.loadNodeMap.forEach(function (value, key) {
    GetTreeDataList({ parentId: key }).then((response) => {
      that.$set(that.$refs.table.store.states.lazyTreeNodeMap, key, response.Data);
    });
  });
},
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页