el-table中使用懒加载,如果直接搜索后点击父节点不会出现懒加载,如果加载树后再搜索后就会出现懒加载,为什么?

在el-table中使用了懒加载,添加了一个搜索的功能。
image.png
根据名称来搜索房屋。
第一次刷新页面,直接搜索带府前的房屋。(没有点击房屋树)
搜索后出现的页面
image.png
此时点击社区,不会出现懒加载。子节点也会出来。
image.png
搜索请求的接口获取到了数据
image.png
来看前端代码:
表格代码
image.png
搜索代码
image.png
点击加载节点调用的方法: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)
    })
  }
},

二、现在点击树后再搜索房屋。
image.png
点击树调用了loadNode方法
搜索后调用了查询的方法
image.png
查询的数据和之前的一样。
这个时候再点击社区,就会出现懒加载了
image.png
出现的并不是我想查询的数据。
其实我想知道为什么第一次直接搜索就点击树就不会出现懒加载(不会调用loadNode方法,第二次就调用了loadeNode方法)

阅读 1.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题