el-tree 懒加载搜索累加回显选中的节点

Posted 2023-05-15

参考技术A html部分：
重点是 node-key="orgCode" , @check="checkChange" , lazy , ref="tree" , :load="loadNode" ,结合输入框。

js部分：用 chooseNode: new Map() 来存所有选中的节点，选中添加，取消移除。具体参照 checkChange 函数。
showTreeChecked 函数也是重点 ，保证每次刷新数据的时候树节点都能把默认选中的数据置为选中状态。
此处本人用的是 setCheckedKeys ，当然官网也有 setCheckedNodes , setChecked 可以选择， setTimeout 主要是为了保证异步渲染能正确操作，有时候 $nextTick 失效，这个我没去研究。
主要是在刷新树的数据时需要把新的数据选中状态正确设置。同时也要保证传入的时候 Map 初始化.

调用的地方：

最后实现效果：

el-tree半节点回显

参考技术A el-tree回显时后台数据返回的有父节点和选中的子节点，如果我们用 setCheckedKeys或者用:default-expanded-keys=“treeDataSelect” :default-checked-keys=“treeDataSelect”来进行回显的话会选中所有子节点；

首先根据ref获取到要node,获得 node 的 key 或者 data,然后判断是否为叶子节点，如果是叶子节点就setChecked设置选中状态；
setChecked(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false