树形表格懒加载工具

初始化

  import LazyTreeTableUtils from '@/utils/lazyTreeTableUtils'// 工具所在路径
  let lazyTreeTableUtils = null
  export default {
    ...
    methods:{
      getLazyTreeTableUtils() {
        lazyTreeTableUtils = new LazyTreeTableUtils({
          api: this.getTreeList,// 调用列表接口的api
          queryParams: ['id', 'type'], // 查询子节点参数的字段名;默认[]
          showCheckBox: true,  // 是否有checkbox的存在  用于钩选状态的恢复;默认false
          init: true, // 初始化是否需要加载根节点;默认true
          process: this.process, // 对于返回数据的加工
          defaultExpandAll: false, // 是否默认展开所有节点;默认false
          defaultExpandedKeys: null // 默认展开的节点id数组;默认null
        }),
      }
    },
    ...
  }

初始化数据

  lazyTreeTableUtils.initData(data)

提示

initData方法是实现数据初始化，把数据赋值到lazyTreeTableUtils工具中的data属性上。以便在lazyTreeTableUtils方法中可以直接对data进行处理，并且通过lazyTreeTableUtils.data可以获取。

参数处理

  lazyTreeTableUtils.dealParams(row)

提示

dealParams方法是根据初始化的queryParams，把传入的row参数提取出queryParams响应参数对应的值。

滚动位置恢复

  lazyTreeTableUtils.resetScrollTop(ref)

提示

resetScrollTop方法是将ref元素恢复到之前scroll的位置。

懒加载

  lazyTreeTableUtils.loadMoreData(val, ref)

提示

loadMoreData方法参数有三：当前行的数据、当前dom元素（通过ref指向）、对于返回数据的加工方法（不传使用初始化时传入的方法）。这个方法在收缩子级时触发。触发后根据参数处理后的参数来调用初始化时传入的列表接口，根据process方法处理获取的参数之后；如果之前showCheckBox值为true，则触发dealChildrenChecked方法根据参数_checked参数来判断是否勾选。然后根据resetScroll方法来使列表保持在调用接口前的滚动位置上。

列表数据刷新

  lazyTreeTableUtils.refreshData(process, ref)

提示

refreshData根据最新的data来重新渲染列表。根据当前展示的层级，一层层请求接口来获取最新的渲染效果。还会根据resetStatusLazy方法来还原到刷新前的效果。

组件源码及综合示例参考

源码 (opens new window)示例 (opens new window)文档 (opens new window)