element 树表格懒加载刷新页面

首先，懒加载时候会遇到增删改子节点。

但是，子节点增删改后不刷新视图（重新加载数据不更新页面）。

而且，element没给出刷新视图的方法。

所以，需要手动定义树表格的刷新方法。

引用，https://blog.csdn.net/Unrequited66/article/details/106757052/。

源码解释请看以上链接，我也是先看到上面的链接再去看源码的。。

 

 

首先定义表格树结构懒加载：

 <el-table
        ref="multipleTable"
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        row-key="areaCode"
        border
        lazy
        :load="loadChildTree"
        :tree-props="{ children: 'children', hasChildren: 'issubordinate' }"
      >
        <el-table-column
          prop="areaName"
          width="250px"
          label="地区名称"
        ></el-table-column>
 </el-table>

注意看    ref="multipleTable"  这个是element定义在this.$refs中的一个键名，有很大用一定要

 

其次在data中定义一个map对象用来保存当前已经打开过的懒加载数据，以及在methods中定义个懒加载的方法，方法中要给map添值：

data(){
　　return{
　　　　loadNodeMap: new Map() /**保存懒加载节点 */,
　　}
},
methods:{
　　loadChildTree(tree, treeNode, resolve) {

        // 懒加载树级

        this.loadNodeMap.set(tree.areaCode, { tree, treeNode, resolve })

        findAreaListReq({ areaCode: tree.areaCode }).then((res) => {

          if (res !== undefined) {

            if (res.code === 200) {

              res.data.forEach((item) => {

                item.fullName = [tree.fullName, item.areaName].join('/')

              })

              resolve(res.data)

            } else {

              this.$message({

                type: 'error',

                message: res.message,

              })

            }

          }

        })

      }

　　}

 

重要的环节，自定义增删改查的逻辑函数：

首先要明白一点，懒加载出来的数据element给我们保存在哪里了，

经过一步步查询，首先排除掉了第一次获取根树的结构中，也就是那个根数据。

后面查询百度以及分析源码，发现他保存在了以下的结构中，可以自行console.log以下的数据，其中$refs后面那个参数是上面自己定义的：

this.$refs.multipleTable.store.states.lazyTreeNodeMap

 

逻辑处理，当删除、新增、修改时我们都要重新刷新视图，而且要通过父节点进行接口调用以及视图刷新，

其中新增要考虑到，当A节点以下没新增前有节点和没有节点时的处理：当有的时候和平时一样，只要刷新一下A节点的子树就可以了，但是当之前没有节点时，涉及到A节点也要重新刷新，不然会没有那个懒加载的标

修改无需考虑，重新刷新即可

删除需要考虑到，当A节点以下删除后有节点和没有节点时的处理：当有的时候和平时一样，只要刷新一下A节点的子树就可以了，但是当之前没有节点时，涉及到A节点也要重新刷新，不然会依然存在那个懒加载的标

||

||

但是删除的那个逻辑好像不用考虑，测试到他不需要重新刷新A的父节点的树

代码如下：

_reRenderChildrenNodeAfterAdd(areaCode, type = 'other') {
        if (type === 'add') {
          // 如果该节点已经打开过了
          if (this.$refs.multipleTable.store.states.lazyTreeNodeMap[areaCode]) {
            this.$refs.multipleTable.store.states.lazyTreeNodeMap[
              areaCode
            ] = this.$refs.multipleTable.store.states.lazyTreeNodeMap[
              areaCode
            ].map((item) => {
              if (item.areaCode === this.addAreaData.supperCode) {
                item.issubordinate = true
              }
              return item
            })
          } else {
            this.$refs.multipleTable.store.states.lazyTreeNodeMap[
              this.addAreaP.supperCode
            ] =         
        this.$refs.multipleTable.store.states.lazyTreeNodeMap[
              this.addAreaP.supperCode
            ].map((item) => {
              if (item.areaCode === this.addAreaData.supperCode) {
                item.issubordinate = true
              }
              return item
            })
          }
        }
        if (this.loadNodeMap.has(areaCode)) {
          const { tree, treeNode, resolve } =     
      },        

其中：

addAreaP是当前的节点也就是A节点，

supperCode是A节点的父节点ID，

areaCode是A节点的ID，

新增的时候调用：

this._reRenderChildrenNodeAfterAdd(

                      this.addAreaData.supperCode,

                      'add'

                    )

其他的不用传'add'