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. 代码实现


  

  
  
  

3. 效果图

vue的element ui使用el-table组件实现懒加载树、默认自动展开层级(一层,二层)、并且解决新增、删除、修改之后树节点不刷新问题_第1张图片

你可能感兴趣的:(Element,vue.js,ui,前端,elementui)