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

1.整体思路

问题：数据量太大了，导致接口返回数据时间较长。解决: 将ElementUi中Table组件加载改为懒加载（查看文档）。思路：初始化打开页面时只显示第一级菜单,用户点击展开菜单之后往后端发送请求,然后加载出一级子菜单；后台只用有一个根据菜单id查询他子菜单的接口就可以。拓展问题：对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. 代码实现

3. 效果图

推荐阅读