el-tree 懒加载数据,增删改时局部刷新实现

1.数据过多时进行懒加载孩子节点,根据层级传参获取后端孩子数据

懒加载主要部分:

1参数:

        :load="loadNode"

         lazy

        :props="defaultProps"

2.defaultProps  需要设置isLeaf: 'isLeaf',去除最后一层孩子节点的展开图表

      defaultProps: {

          children: 'children',

          label: 'label',

          isLeaf: 'isLeaf'

        },

2.增删改时实现局部刷新

主要思路:将展开的层级的node保存当curNode中,在进行添加刷新后调用partialRefreshpartialRefresh()方法【下面代码】

 partialRefreshpartialRefresh (node) {
      this.mark = true
      node.loaded = false // 设置loaded为false;模拟一次节点展开事件,加载重命名后的新数据;
      node.expand() // 新建子节点是刷新一次本节点的展开请求,而重命名和删除则需要刷新父级节点的 
        的展开事件,可以设置node.parent.loaded = false;node.parent.expand();
    },

完整案例代码(没和后端交互)





你可能感兴趣的:(el-ui组件补充,vue.js,javascript,前端)