vue table 懒加载树形数据时，子节点数据刷新处理

树形数据加载很常用的功能，而且使用场景非常多，但子节点刷新确是个麻烦事

#树形数据分两种，后端接口天然支持树形。这种非常简单。

<template>
    <div>
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="date" label="日期" sortable width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
  </template>
  <script>
    export default {
      data() {
        return {
          tableData: [{
            id: 1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            id: 2,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            id: 3,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [{
                id: 31,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                id: 32,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }]
          }, {
            id: 4,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
      },
    }
}
</script>

正常数据量不大，直接接口就能把树形数据放回，万事大吉，刷新接口，即可完成子节点的刷新

前端页面需要懒加载，接口不支持

有些时候，接口是不可能把所有子节点的数据返回的，那么只能点击一个父级加载一个，而且懒加载，比较省资源。那么就必须要解决刷新的问题。

<template>
    <div>
        <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load" ref="table"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData1: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 2,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                id: 3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                hasChildren: true
            }, {
                id: 4,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            maps: new Map()
        }
    },
    methods: {
        load(tree, treeNode, resolve) {
            getProjectWork({
                page: this.pageParam.page,
                size: this.pageParam.size,
                fid: tree.id,
            }).then((res) => {
                if (res.code == 0) {
                    if (!res.data.list.length) {
                        /*
                            element-ui中table懒加载数据时，如果data是空数组，则不会刷新
                            lazyTreeNodeMap中记录了懒加载节点的子列表数据
                            通过tree.id作为key，将数据存入lazyTreeNodeMap中，因此手动清除缓存数据即可
                        */
                        // 注意：要在el-table组件上绑定ref='table'
                        this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, [])
                    } else {
                        resolve(res.data.list);
                    }
                    this.map.set(tree.id, { tree, treeNode, resolve });

                }
            });
        },
        // 触发刷新节点方法
        refresh(parentId) {
            // 根据父级id取出对应节点数据
            if (this.maps.get(parentId)) {
                const { tree, treeNode, resolve } = this.maps.get(parentId)
                if (tree) {
                    this.load(tree, treeNode, resolve)
                }
            }
        },
    },
}
</script>

正常配置

1. 设置 Table 的 lazy 属性为 true
2. 加载函数 load
3. 指定 row 中的 hasChildren字段来指定哪些行是包含子节点

以上懒加载必备属性。

解决懒加载刷新

1. 定义maps字段

this.map.set(tree.id, { tree, treeNode, resolve });

2. 每次点击打开父节点时，把参数存储下来。

直接在加载子节点属性的方法内补充

 this.map.set(tree.id, { tree, treeNode, resolve });

3. 重点，当数据为空时，需要手动处理

this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, [])

4. 补充一个刷新的方法

此方法就是直接在请求一次加载子节点

 refresh(parentId) {}

后面的工作就简单了

1. 删除数据了，直接访问一下 refresh 方法
2. 数据修改了，直接访问一下 refresh 方法
3. 批量数据删除了，那就一个个去请求 refresh 方法

注意点：

maps 存储的是以父节点id为key的对象，触发的时候也是用父节点去触发。