Step 1: Add a table to element

: the 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="Operation"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" @click="handleEdit(row.Id, row)"
            >Edit < / el - button ><el-button type="danger" @click="handleDelete([row.Id], row)"
            >Delete < / el - button ></template>
      </el-table-column>
    </el-table>
Copy the code

Step 2: Save the tree node in the load method

/** * lazy loading */
load(tree, treeNode, resolve) {
  const id = tree.Id;
  this.loadNodeMap.set(id, { tree, treeNode, resolve });// Save tree nodes
  GetTreeDataList({ parentId: tree.Id }).then((response) = > {
    response.Data.forEach((element) = > {
      element.hasChildren = true;
    });
    resolve(response.Data);
  });
},
Copy the code

Step 3: Refresh the node when the tree node data is updated

/** * Select * resolve from loadNodeMap based on the id of selectCurrRow@param CallbackRow {Array} Returns an Array of child nodes * */ of the current node
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);
    });
  });
},
Copy the code