在el-table中使用了懒加载,添加了一个搜索的功能。
根据名称来搜索房屋。
第一次刷新页面,直接搜索带府前的房屋。(没有点击房屋树)
搜索后出现的页面
此时点击社区,不会出现懒加载。子节点也会出来。
搜索请求的接口获取到了数据
来看前端代码:
表格代码
搜索代码
点击加载节点调用的方法:loadNode
loadNode(tree, treeNode, resolve) {
const addressName = this.baseQueryForm.addressName
xqandfwApi.getTableChildren(tree.addressId).then(data => {
console.log('加载树')
this.children = data.data.data
this.children.forEach(item => {
if (item.addressType != '14') {
item.hasChildren = true
}
})
console.log(this.children)
console.log(this.xqandfwList)
return resolve(this.children)
})
},
搜索调用的方法:handleQuery
/* 查询 /
handleQuery() {
var data = {
addressName: this.baseQueryForm.addressName
}
if (data.addressName == '' || data.addressName == undefined) {
;(this.xqandfwList = []), this.loadfirstnode()
} else {
;(this.xqandfwList = []), (this.loading = true)
xqandfwApi.Select(data).then(response => {
response.data.data.forEach(item => {
if (item.addressType === '12') {
item.hasChildren = true
}
})
this.xqandfwList = fromList(
response.data.data,
true,
'addressId',
'parentAddressId'
)
this.loading = false
console.log(this.xqandfwList)
})
}
},
二、现在点击树后再搜索房屋。
点击树调用了loadNode方法
搜索后调用了查询的方法
查询的数据和之前的一样。
这个时候再点击社区,就会出现懒加载了
出现的并不是我想查询的数据。
其实我想知道为什么第一次直接搜索就点击树就不会出现懒加载(不会调用loadNode方法,第二次就调用了loadeNode方法)