Vue + Element 中的Table懒加载增加、修改、删除后数据动态刷新

前言：
  我在做项目中使用Table懒加载出现,懒加载的数据增加、修改、删除不能自动更新问题,看了看网上没有比较全的解决办法,现把解决办法共享出来.

Element table官网图示

代码

  可以看到执行了load方法进行了懒加载,但是在实际开发中发现,在像子级中添加数据,完成后,执行主列表刷新后,懒加载部分是没有进行刷新的.我觉得这就是个bug,官网也没有给出解决办法!

解决思路

  既然官网没有给出解决办法,我们只能自己尝试去解决,现给出解决办法

全局变量

  我们可以在执行懒加载的时候,将load方法的tree, treeNode, resolve三个参数,通过id的方式进行绑定到Map中,具体实现如下

第一步

  核心部分为this.maps.set(id,{tree,treeNode,resolve})我在data里添加了全局变量maps:new Map()

第二步

  在执行增加、删除、修改的方法时,将执行该方法的id和他的父级id绑定到全局变量data中parentRoleId:'', currentRoleId:'',
   解释:为什么要绑定父级id,因为,当你的数据存在二级以上的时候,你会发现,在添加下级,当前级的该数据并没有刷新,因为本身没子级,没有hasChildren属性,所以我们的解决思路,需要刷新该数据的父级列表和下级列表.
  如果不刷新父级,只刷新子级,在二级以上会出现的问题复现,看下图:

  如图123123数据是二级懒加载出来的数据,当前是没有子级的,如果这个时候我添加子级,当前级是不会刷新的,也就不会出现子级箭头标识.
  这时候我添加了一条数据显示效果如下:

  所以在刷新子级的同时,必须刷新当前级的列表,也就是父级列表.

第三步

  在添加、修改、删除完成后,通过id获取到Map中存储的tree, treeNode, resolve这三个参数执行load(tree, treeNode, resolve)方法
  代码示例:

这里是需要判断是id是否能从map中获取到tree, treeNode, resolve,因为当子级节点未进行懒加载,Map中是没有这个id对应的参数的

以下是本人的源码,请参考

  table数据部分,设置了懒加载和懒加载方法loadChild

<el-table
                    :data="dataTable"
                    height="380"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                    row-key="id"
                    lazy
                    :load="loadChild"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                >

  data全局变量
其中parentRoleId为父级id,currentRoleId为当前数据id,maps存放的执行懒加载时候id绑定的tree, treeNode, resolve三个参数.

data() {
        return {
            //数据列表
            dataTable: [],
            //查询数据
            query: {},
            //页码信息
            pageConfig:{
                page:1,
                rows:10
            },
            total:0,
            //多选数据
            multipleSelection: [],
            //添加对话框隐藏
            addVisible:false,
            //添加对话框数据
            addData: {},
            //对话框表单宽度
            formLabelWidth: '120px',
            //编辑对话框隐藏
            editVisible: false,
            editData: {},
            parentRoleId:'',
            currentRoleId:'',
            rowData:{},
            maps:new Map()
        }
    },

  loadChild方

//加载子角色列表
        loadChild(tree, treeNode, resolve){
            const id = tree.id;
            this.maps.set(id,{tree,treeNode,resolve})
            this.$axios({
                url:this.$api.businessUrl+'/api/role/loadSonList/'+id,
                method:'get'
            }).then(response =>{
                let returnData = response.data;
                if(returnData.status == 'SUCCESS'){
                    resolve(returnData.data)
                }else{
                    this.$message.error(returnData.message)
                }
            })
        }

  添加后刷新执行懒加载部分,其中核心部分为注释部分:懒加载刷新当前级,懒加载刷新父级

addRole(data){
            if(!this.addData.roleName){
                this.$message.warning('请填写角色名称')
                    return false
            }
            if(!this.addData.roleCode){
                this.$message.warning('请填写角色编码')
                    return false
            }
            const currentId = this.currentRoleId
            if(currentId){
                this.addData.parentId=currentId
            }
            this.addData.isHasChild=0
            this.$axios({
                    url: this.$api.businessUrl+'/api/role/add',
                    method:'post',
                    data:this.addData
                }).then(response =>{
                    let returnData = response.data
                    if(returnData.status == 'SUCCESS'){
                        this.getData()
                        //懒加载刷新当前级
                        if(currentId && this.maps.get(currentId)){
                            const {tree,treeNode,resolve} = this.maps.get(currentId)
                            this.loadChild(tree,treeNode,resolve)
                        }
                        //懒加载刷新父级
                        const parentId = this.parentRoleId
                        if(parentId && this.maps.get(parentId)){
                            const {tree,treeNode,resolve} = this.maps.get(parentId)
                            this.loadChild(tree,treeNode,resolve)
                        }
                        this.$message.success(returnData.data)
                        this.addVisible = false
                    }else{
                        this.$message.error(returnData.message)
                    }
                })
        }

总结

  方法虽然烦琐,但是确实解决了无限下级懒加载动态刷新问题,Element的bug是真的很多,如果你觉得有帮助,或者不懂的地方,欢迎评论,本人精通Java,前端技术也是偶尔涉猎.