element树--实现树节点的搜索,对目标节点进行展开、高亮以及定位到该节点

254 阅读1分钟
              <el-select
                v-model="filterText"
                filterable
                clearable
                remote
                placeholder="请输入关键词"
                @change="handleSelectChange"
                :remote-method="handleRemoteMethod">
                <el-option
                  v-for="item in filterOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <div id="divTree" style="height:500px; overflow-y: auto" ref="treeWrapper">
                <el-tree
                ref="Tree"
                :data="TreeData"
                :default-expanded-keys="expandData"
                highlight-current
                node-key="id"
                :props="{
                label: 'name'
                }">
                <template v-slot="{ node }">
                  <span class="custom-Tree-node" :node-key="node.key"> {{ node.label }}</span>
                </template>
               </el-tree>
              </div>
handleSelectChange(data) {        //data为select框选中的值
      let expandTreeData =[]
      expandTreeData.push(data)
      this.expandData = expandTreeData  //展开节点 
      this.$refs.Tree.setCurrentKey(data)   //高亮选中的节点
      //以下代码为定位到选中节点
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
       this.$nextTick(() => {
          const treeHeight = this.$refs.treeWrapper.clientHeight //屏幕可见区域高度
          let liList = document.querySelectorAll('.custom-Tree-node')
          liList = [...liList]
          //遍历每一个节点
          liList.forEach(it => {
            const nodeKey = it.getAttribute('node-key')
            //如果节点和选中节点相等
            if (nodeKey === data ) {
               // 选中节点的offsetTop大于屏幕可见高度
              if (it.offsetTop > treeHeight) {
               //调整滚动该条高度   
                this.$refs.treeWrapper.scrollTop = it.offsetTop - 50
              } else {
                 //如果选中节点的offsetTop不大于屏幕可见高度,滚动条位置在最顶端
                this.$refs.treeWrapper.scrollTop = 0
              }
            }
          })
        })
      }, 500);
    }