el-tree:懒加载可选树状图&&服务端返回节点选中状态&&前端手动组装完整treeData

问题:
1.懒加载时,当前展示的节点的子节点是未知的,假如之前编辑过,那前端需要字段来判断某个节点当前应该是什么状态:未选 半选 全选。

2.如果前端需要当前已获取的treeData,应该如何手动组装treeData。

一.懒加载必要性
当tree数据量过大时,服务端一次性返回全量的数据,服务端查表时间过长,http传输可能会时间过长,前端浏览器渲染时间也会过长。

以我的项目为例,大集团作为一级,二级是大集团下的组织和子公司,二级下依然包含组织和具体人员。tree总共四级,叶子节点上万。

一二级展示:
el-tree:懒加载可选树状图&&服务端返回节点选中状态&&前端手动组装完整treeData_第1张图片总共3-4级:
el-tree:懒加载可选树状图&&服务端返回节点选中状态&&前端手动组装完整treeData_第2张图片

二.代码实现
懒加载实现请查看elementui文档,代码只展示关键部分。
1)判断当前节点状态,目前版本只实现了全选情况。后端说下个版本再加半选功能,到时候再更新。
思路:通过default-checked-keys。每个节点对象添加isSelected字段,前端每请求得到一次数据,将isSelected为true的节点key添加到default-checked-keys数组。

2)前端自己组装当前已获得的treeData。
这个是因为后端要求,提交时如果父节点是全选状态,那req只传父节点不传子节点。通过getCheckedNodes方法获取选中节点,当某节点未点击下拉获取子节点时,该方法自然只能获取到该节点;但当已加载其子节点时,方法会同时获取到子节点。为了过滤子节点,所以前端需要当前已加载的完整treeData。
思路:每请求一次子节点,将返回的子节点添加为父节点的children属性值。

// 代码在vue在编写
// tree每一层都是数组结构,res为接口返回值

... // 请求数据略
if (!this.treeData.length) { // 第一次请求
  this.treeData = res
} else {
  this.buildTreeData(this.treeData, currentId, res)
}

// buildTreeData方法
```javascript
/**
* treeData:{Array} 当前已组装的tree数据
* param: {String} id 当前点击的节点
* param: {Array} children 获取到的子节点
* param: {Boolean} flag 是否继续查找,为true表示需要继续,用于停止递归和for循环
* return {Array} 当前已组装的tree数据
*/
buildTreeData(treeData, id, children, flag) {
  for (let i = 0; i < treeData.length; i++) {
    if (flag && treeData[i].id === id) {
      treeData[i].children = children
      flag = false
    }
    if (!flag) break // 跳出循环
    // flag控制是否继续递归
    if (flag && treeData[i].children && treeData[i].children.length) {
      this.buildTreeData(treeData[i].children, id, children, flag)
    }
  }
  return treeData
}


你可能感兴趣的:(elementUI)