第十篇 ElementUI 树形表格懒加载-新增修改删除等操作进行局部刷新数据

该篇的模拟的功能：ElementUI 树形表格懒加载数据展示，并对某列数据进行相应操作(新增，修改和删除)，并对列表进行局部的数据刷新。

模拟效果图如下：

1. 注意到到点的就是，后端返回的数据结构类型中，每一层级都得包含父级的标识，如下的 parentId 的父级的 id为 0，自己的 id 为1：

        {
          id: 1,
          parentId: 0,
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        },

2. 使用到的主要方法是懒加载的方法：

    async loadSearch(row, treeNode, resolve) {
      this.maps.set(row.id, { row, treeNode, resolve })
      const loadData = [
        {
          id: 3100,
          parentId: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          id: 3200,
          parentId: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }
      ]
      await setTimeout(() => {
        resolve(loadData)
      }, 2000)
      await this.setNewRowData(row, loadData)
    },

3.这里还用到了 Map 对象的知识，主要用于存储懒加载级的 key 以及对应的 value,这样方便触发上述懒加载方法时，取到对应的 { row, treeNode, resolve } 值，再进行懒加载，存储方法：

this.maps.set(row.id, { row, treeNode, resolve })

4. 局部刷新 封装了一个公共方法：

先从上述的 map 对象取到这个 parentId 对应的 { row, treeNode, resolve } ，之后将 该 parentId 之前懒加载的数据置空，然后再去请求懒加载方法获取新的子集数据。

    // 重新触发树形表格的loadSearch函数
    refreshLoadTree(parentI