这两天快被这个懒加载加搜索搞崩溃了
今天小有收获,后面优化了再更新
主要说一下一棵树如何懒加载和搜索
1、ref不解释了,和本次代码无关
2、normalizer格式化内容不重要
3、load-options很关键
4、 @search-change="itemInput"很关键
5、 @open="itemopen(rowIndex)"重要
6、@close="itemClose(rowIndex)"重要
7、 @keydown.native="assetTreeKeydownFun"很关键
8、 :async="Isasync"很关键
9、(优化) :default-expand-level=“defaultLevel”
10、(优化) open-direction=“bottom”
11、 (优化)@keyup.native=“assetTreeKeyupFun($event)”
<TreeSelect
:ref="'treeselect' + rowIndex"
v-model="row.assetTypeCode"
:options="deptOptions"
:normalizer="normalizer"
clearable
no-options-text="暂无可用选项"
noChildrenText="数据加载中"
noResultsText="暂无匹配项"
loadingText="数据加载中"
:matchKeys="['name', 'code']"
no-results-text="没有匹配的搜索结构"
placeholder="请选择资产分类名称"
searchPromptText="正在搜索"
style="width: 100%"
:appendToBody="true"
:disable-branch-nodes="true"
:load-options="Isasync ? asyncOptions : loadOptions"
@search-change="itemInput"
@open="itemopen(rowIndex)"
@keydown.native="assetTreeKeydownFun"
@close="itemClose(rowIndex)"
@select="node => treeHandleSelect(rowIndex, node)"
:async="Isasync"
:default-expand-level="defaultLevel"
open-direction="bottom"
@keyup.native="assetTreeKeyupFun($event)"
>
<div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
[{{ node.raw.code }}]{{ node.raw.label }}
</div>
<div slot="value-label" slot-scope="{ node }">{{ row.assetTypeCode ? `[${row.assetTypeCode}]` : '' }}{{ row.assetTypeName }}</div>
</TreeSelect>
2、文档很重要
延迟加载就是懒加载
异步搜索就是搜索功能
两个事件都用到了loadOption,那怎么触发,何时触发,以什么形式触发,光是这几点就花了我好长时间去研究。
肯定要有一个判断条件来决定何时触发哪个事件
关键就在于async是否启用异步搜索模式
有了这个就好办了,肯定不能默认为true,这样就不会走懒加载了,那就得找触发事件了
如果开启,就搜索,不开启就懒加载
:load-options="Isasync ? asyncOptions : loadOptions"
先在data中定义一下:
Isasync: false,
defaultLevel: 0,
重要的就是open、close和search-change事件,我试过input,这个事件不会触发,不知道要加什么条件才能触发,不过不要紧,用search-change事件就可以
在用户搜索的时候打开异步搜索模式,这个有点缺陷,写到这才想起来,这个方法应该删掉才对,因为它是搜索到后才触发,会有个bug,就是第一次的时候不查,第二次的时候才触发,后来换成keydown,键盘按下就触发,就没这个bug了,所以改成下面这个
错误示范:
itemInput(value) {
this.Isasync = true
},
正确示范:优化点 this.defaultLevel = 5,当搜索到内容的时候,只展开一级,要点击才会一层一层展开,但是这里要的效果是全部展开,我默认给了5,如果还有很深的层级就写的再大一点
assetTreeKeydownFun() {
this.Isasync = true
this.defaultLevel = 5
},
为了不影响懒加载的正常使用,菜单打开和关闭的时候都要关掉异步加载,默认展开为0
itemopen(index) {
this.Isasync = false
this.defaultLevel = 0
},
itemClose(index) {
this.Isasync = false
this.defaultLevel = 0
},
当清空输入框的时候遇到一个bug,无内容的时候还是显示正在搜索中,这个时候用键盘抬起事情
关闭懒加载
assetTreeKeyupFun(e) {
if (!e.target.value) {
this.Isasync = false
this.defaultLevel = 0
}
},
这里要注意一下,搜索是要后台配合的,后台把查到的数据直接返给我们,我们拿来直接用就行,我这里还遇到一个问题,就是查到的只有code没有label,尽管树插件的插槽里显示的是label,但是normalizer格式化的时候是把name转换成label的,在异步搜索这里好像没有走格式化,必须是label有值才行,后端把label和name都赋同样的值后,就可以正常显示了。
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.code,
label: node.name,
children: node.children,
}
},
如果后端返的内容不是树结构的,那就得自己处理成树结构的,用递归或别的,因为我直接就能拿到了,就懒得不写那一步啦
// treeselect树异步搜索
asyncOptions({ action, searchQuery, callback }) {
if (action === ASYNC_SEARCH) {
findTreeselect({ searchValue: searchQuery }).then(res => {
const options = res.data.map(i => ({
id: i.id,
code: i.code,
label: i.name,
children: i.children,
}))
callback(null, options)
})
}
},
树懒加载和树搜索是两个完全不同的接口,懒加载第一次请求的是根节点,传id后才拿到对应的子节点
所以页面初始化的时候就要调一次
// 获取根节点树数据
getTreedata() {
lazyTreeselect().then(res => {
// this.deptOptions = res.data
for (let index of res.data) {
let modeInfo = {}
modeInfo.id = index.id
modeInfo.code = index.code
modeInfo.label = index.name
modeInfo.name = index.name
modeInfo.children = null
this.deptOptions.push(modeInfo)
}
})
},
//treeselect 树懒加载
loadOptions({ action, parentNode, callback }) {
if (action === LOAD_CHILDREN_OPTIONS) {
//加载点击节点的 子节点
lazyTreeselect({ code: parentNode.code }).then(response => {
let arr = []
for (let index of response.data) {
let chiledModeInfo = {}
chiledModeInfo.id = index.id
chiledModeInfo.code = index.code
chiledModeInfo.label = index.name
chiledModeInfo.name = index.name
chiledModeInfo.children = null
if (index.hasLeaf == '1') {
delete chiledModeInfo.children
}
arr.push(chiledModeInfo)
}
parentNode.children = arr
})
callback()
}
},
结尾:需求搞出来之后,还是有点想哭的赶脚,前两天完全卡住了,写的也有问题,页面频发触发接口,不停的调,页面都奔溃过好几次。
放了两天之后,今天重新搞起来,还是稳住自己,沉下心去想。
有问题随时欢迎交流