远程搜索返回搜索列表并在树里高亮显示搜索节点

搜索树实现

Posted by Ayi on October 24, 2018

代码实现

    <el-tree :data="treeData" :props="defaultProps" :load="loadNode" lazy highlight-current node-key="value" ref="tree" accordion auto-expand-parent :current-node-key="currentNodeKey" :default-expanded-keys="defaultExpanded" :filter-node-method="filterNode">
    </el-tree>


  data () {
    return {
      timeout: null,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'isLeaf' // 设置下钻箭头
      },
      currentNodeKey: '', // 当前选中节点的key -> string
      defaultExpanded: [], // 默认展开的节点的key的数组
      filterText: ''
    }
  }

方法实现

    loadNode (node, resolve) {
      // this.treeshow1 = false
      if (node.level === 0) {
        return false
      }
      let arr = []
      Api.getfindGroupTree(node.data.value)
        .then(data => {
          if (data.status === 0) {
            let body = data.data
            // console.log(body)
            if (body instanceof Array) {
              if (body.length !== 0) {
                body.forEach(item => {
                  arr.push({
                    value: item.value,
                    label: item.label,
                    isLeaf: item.leaf
                  })
                })
              } else {
                arr = []
                resolve([])
                return
              }
            } else {
              arr = []
            }
            let childData = arr
            setTimeout(() => {
              resolve(childData)
            }, 300)
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败'
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'error',
            message: '获取数据失败'
          })
        })
    },
    querySearchAsync (queryString, cb) {
      if (queryString === '') {
        let air = []
        cb(air)
        // this.getfindGroupTree(this.BtnArr[0], 0)
      } else {
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          Api.getfindByKeyWord(queryString)
            .then(data => {
              let datas = data.data
              if (data.status === 0) {
                if (datas !== []) {
                  var restaurants = datas
                  var arr = []
                  restaurants.forEach((item, index) => {
                    arr.push({
                      id: item.value,
                      value: item.label,
                      parentid: item.parentid
                    })
                  })
                  cb(arr)
                } else {
                  let air = []
                  cb(air)
                }
              } else {
                this.$message({
                  type: 'warning',
                  message: '获取数据失败'
                })
              }
            })
            .catch(res => {
              this.$message({
                type: 'error',
                message: '获取数据失败'
              })
            })
        }, 500)
      }
    },
    handleSearchSelect (item) {
      // 下拉框选择,回调函数
      this.filterText = item.value
      this.filterSearch(item.id, item.parentid)
    },
    filterSearch (id, parentid) {
      Api.getdealWithSearch(id, parentid)
        .then(data => {
          if (data.status === 0) {
            let datas = data.data
            let defaultExpanded = []
            for (let i = 0; i < datas.length; i++) {
              defaultExpanded.push(datas[i]) // 返回被搜索节点数组以及其父节点的数组
            }
            this.defaultExpanded = defaultExpanded
            let time = datas.length - 1
            setTimeout(() => {
              this.$refs.tree.setCurrentKey(datas[datas.length - 1])
            }, time * 400) // 时间要比懒加载时间长,否则无法高亮显示选中节点
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败'
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'error',
            message: '获取数据失败'
          })
        })
    }