vue的element ui使用el-table组件实现懒加载树、默认自动展开层级（一层，二层）、并且解决新增、删除、修改之后树节点不刷新问题

1.整体思路

1. 问题：数据量太大了，导致接口返回数据时间较长。
2. 解决: 将ElementUi中Table组件加载改为懒加载（查看文档）。
3. 思路：初始化打开页面时只显示第一级菜单,用户点击展开菜单之后往后端发送请求,然后加载出一级子菜单；后台只用有一个根据菜单id查询他子菜单的接口就可以。
4. ���展问题：对table树增删改查后，会存在table菜单节点不刷新问题，实际数据已经刷新。（ 改成懒加载后, 加载很快.；但是子菜单加载一次之后就被缓存了,在怎么点击也不会重新去请求后台；这个也导致了在我们增删改排序等操作菜单之后, 页面对应的菜单节点没有更新, 实际数据已变更.； 整体刷新一下页面的话会显示正确, 不过不可能每次更新之后,强制刷新页面吧，这样交互效果很不好）。

   5.解决不刷新问题：刷新节点（修改了哪一行, 就拿到这一行数据的parentId, 然后去调用接口, 查到这个parentId下一级子菜单,查到数据之后塞回去就行了. 接口和页面加载的那个接口是复用的, 无非页面加载的时候parentId传的是0或者null）。

   6.关键：

   this.$set(this.$refs.pointMultipleTable.store.states.lazyTreeNodeMap, key, data)// lazyTreeNodeMap: 就是this.$refs.table.store.states.lazyTreeNodeMap//  key：就是table-key，相当于父节点数据的id// data：就是子节点数据// this.$refs.pointMultipleTable注意这个pointMultipleTable是你的table属性:ref的名字//步骤 :     // 1、先给table标签添加一个ref="pointMultipleTable"，ref可以自己随便自定义    // 2、在点击父节点要添加一个子节点，或删除一个子节点后，已请求完后台接口后，拿到父节点id，和最新增删后的子节点数据xxxList    // 3、最后调用 this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, id, xxxList);//根据父节点id更新子节点数据

2. 代码实现

                                                                                    {{(scope.row.createTime)}}                                                                            修改                                            新增                    删除                                          import {    getDept,    delDept,    addDept,    updateDept,    lazyList} from '@/api/manager/dept'// 设置循环的默认值，判断是否调用openTreeHandle，触发点击事件，使得节点展开let index = 1export default {    name: 'deptTree',    components: {    },    data() {        return {            expandRowKeys: [],            parentId: '',            type: '',            // treeNodeMap: new Map(),            // 遮罩层            loading: true,            // 表格树数据            deptList: [],            // 查询参数            queryParams: {                parentId: undefined            }        }    },    created() {        // 部门列表        this.getList()    },    methods: {        /** 查询部门列表 懒加载 */        getList() {            this.loading = true            lazyList(this.queryParams).then(response => {                console.log(response, 'response查询部门列表')                this.deptList = response.data                this.loading = false                // 默认展开了deptList的第一层所有数据的下级数据(相当于自动点击了一次)                this.openTreeHandle(this.deptList)            })        },        // 点击列表懒加载        load(tree, treeNode, resolve) {            console.log(tree, 'tree')            // 加载子节点时，对子节点进行赋值            // this.treeNodeMap.set(tree.deptId, { tree, treeNode, resolve })            this.queryParams.parentId = tree.deptId            lazyList(this.queryParams).then(res => {                console.log(res.data, 'res.data')                // deptList的第一层展开后，如果还想展开下面层级，就设置index且调用if的方法。                // index  0) {                    for (let i = 0; i  {                console.log(response.data, 'response.data')                // 最近的父级id                this.parentId = response.data.parentId                this.type = 2                 //  .....................            })        },        /** 提交按钮 */        submitForm: function () {            this.$refs['form'].validate(valid => {                if (valid) {                    updateDept(this.form).then(response => {                        this.$modal.msgSuccess('修改成功')                        this.queryParams.parentId = null                        // 方式1：刷新table                        this.reflushtable()                        // 方式2、刷新table                        // this.refreshData()                         //  .....................                    })                } else {                    addDept(this.form).then(response => {                        this.$modal.msgSuccess('新增成功')                        this.queryParams.parentId = null                        // 方式1：刷新table                        this.reflushtable()                        // 方式2、刷新table                        // this.refreshData()                         //  .....................                    })                }            })        },        // 刷新节点：方法1        reflushtable() { // 解决菜单懒加载时.  更新,添加,删除 排序不更新的情况 （根据父级id获取子级数据）            lazyList({                parentId: this.parentId            }).then(res => {                console.log(res.data, 'res.data')                this.$set(this.$refs.pointMultipleTable.store.states.lazyTreeNodeMap, this.parentId, res.data)                // 展开父级节点                if (this.type == 1) { // 新增                    const pid = this.parentId.toString()                    this.expandRowKeys = this.expandRowKeys.concat([pid])                    console.log(this.expandRowKeys, ' this.expandRowKeys-----')                }            })        },        // 如果对应节点没有展开过，那获取节点时候会出现获取不到情况(这个我暂时没有找到解决办法)，        //  this.treeNodeMap.get(this.parentId)找不到，在load中这个parentId没有存储过，故而获取不到。        // 所以推荐使用上述方法1        // 刷新节点：方法2        refreshData() {             // 获取节点            const node = this.treeNodeMap.get(this.parentId)            // 获取需要刷新节点            const { tree, treeNode, resolve } = node            // 重新加载子节点数据            this.load(tree, treeNode, resolve)        },        /** 删除按钮操作 */        handleDelete(row) {            this.$confirm('是否确认删除数据项?', '警告', {                confirmButtonText: '确定',                cancelButtonText: '取消',                type: 'warning'            })                .then(function () {                    return delDept(row.deptId)                })                .then(() => {                    this.queryParams.parentId = null                    this.$modal.msgSuccess('删除成功')                    // 方式1：刷新table                    this.reflushtable()                    // 方式2、刷新table                    // this.refreshData()                     //  .....................                })                .catch(() => { })        }    }}      

3. 效果图