el-tree是懒加载的包含下级需要一层一层展开每次都会有一个请求而我们的请求有时候很慢每次resolve数据的时候都要请求一个数据每次请求都会产生loadingloading过多加载时间过长这个需要考虑。

el-tree由于是懒加载而且是包含下级的我们这边初次的方案是通过default-checked-keys和default-expanded-keys属性进行回显发现总是会多展开一层

loadNode(node,

_resolve(this.handleNodeData(node.data.orgRefNo))).***n((res)

{return

resolve(res);});}},handleNodeData(orgRefNo)

{const

:current-node-keycurrentNodeKey

:default-expanded-keysdefaultExpandedKey

:default-checked-keystreeCheckKeyList

node-keyorgRefno//

比如说我们默认回显的是总行的值但是因为是包含下级的所以总行下一级的数据会全部会被回显。

treeCheckKeyList为

[01,

0105]这里我们做的是下一级的数据会被回显不是下层好几级的数据都会回显这是因为由于数据是懒加载的下级下下级下下下级。

。

。

的数据是未知的所以只能做到其下一级。

后端提供一个查询父级的接口这个接口需要把选中数据的值传给后端然后查询出来这些选中数据的父级父父级父父父级。

。

。

直到找到最顶层级别返回给前端。

[01,

同时后端还会把所有的选中的数据返回(这里会导致后面的问题)所以总共返回的是[01,

0101,

如果模拟选中的数据是测试0101(对应的id是0101)包含下级总共选中的数据是

010101

},把后端返回的数据赋值defaultExpandedKey,把这些数据默认展开即可自动勾选到下一级

问题是把第三层级的也选上了主要原因是查询上级接口的返回数据把选中的数据也返回了

不可以过滤数据比较麻烦不知道应该过滤哪些条数据。

选中的数据分布可能比较混乱分布在各个层级。

new

_resolve(this.handleNodeData(node.data.orgRefNo))).***n((res)

{return

包含下级的时候无法做到真正的最后一级不展开(比如这里指的是01010102010301040105数据不展开一旦展开就会自动默认把下级勾选上)数据加载过多的话需要请求多次(有时候数据量很大一次性勾选很多很多条数据回显请求的接口过多影响使用体验)

基于上面的难点和体验又换了一套方案实现就是不会主动去触发哪些节点展开也就不会调用查询父级的接口queryUpOrgList,进而不会多次执行resolve进行下级数据查询而是给用户一个标识----对于全选半选的数据将全选半选的标识再去默认赋上这样让用户一层一层的去点击。

效果如下

首次只加载初始化数据全选半选给出一个标识让用户知道数据在哪些层级手动去进行点击。

因为此次数据主要是用作回显使用所以我们需要给这样一个变量去处理回显数据

nodesMap:

},indeterminate用作半选的回显checked用作全选的回显。