vue+el-tree 通过下拉框选中节点，定位到当前节点，并高亮

此处为下拉选择器：

        <el-select
          ref="searchSelect"
          v-model="filter"
          filterable
          remote
          size="mini"
          clearable
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          @input="handleChange"
          @focus="selectFocus"
          @visible-change="visibleChange"
          @blur="selectBlur"
          @change="selectChange">
          <el-option
            v-for="(item,i) in options"
            :key="item.id+'_'+i"
            :label="item.label"
            :value="item.id">
          </el-option>
        </el-select>

 此处为过滤节点，满足条件的树节点按名称显示在下拉选择器种：

    remoteMethod(query) {
      if (query !== '' && query.trim() !== '') {
        this.filterCopy = query
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.filterCallback({query, filterType: this.filterType});
        }, 200);
      } else {
        this.options = [];
      }
    }

    getListByKey({query: val, filterType}) {
//此处flatTreeData是由el-tree的数据转换来的，具体方法如下：
      return this.flatTreeData
        .filter((item) => {
          const includesLabel = item.label ? item.label.toLowerCase().indexOf(val.toLowerCase()) > -1 : false
          const includesId = item.id ? item.id.toLowerCase().indexOf(val.toLowerCase()) > -1 : false
          const filterTypeMap = {
            0: includesId, 1: includesLabel
          }
          return filterType ? filterTypeMap[filterType] : (includesId || includesLabel)
        })
        .splice(0, 500);
    },

    mapTree(data) {
      const arr = []
      function fn(arrs) {
        for (let items of arrs) {    //遍历树
          if (items.type === 'node') {
            arr.push(items)
          }
          if (items.children && items.children.length > 0) {
            fn(items.children)
          }
        }
      }
      fn(data)
      return arr
    },

以下为选中节点时，触发的事件

    handleChange(val) {
      this.$refs.tree.scrollToNode(val)
      this.filter = this.filterCopy
    },
    selectFocus(e) {
      let value = e.target.value;
      setTimeout(() => {
        let input = this.$refs.searchSelect.$children[0].$refs.input;
        input.value = value;
        if (value) {
          this.remoteMethod(value)
        }
      })
    },

此处为关键节点，选中节点设置为当前节点，并滚动到屏幕中间。

scrollToNode(scrollToData) {
      const node = this.$refs.tree.getNode(scrollToData);
      if (node) {
        // 获取其所有父级节点
        this.getParentAll(node)
        if (this.nodeParentAll.length > 0) {
          // 将获取到的所有父级节点进行展开
          for (var i = 0, n = this.nodeParentAll.length; i < n; i++) {
          this.$refs.tree.store.nodesMap[this.nodeParentAll[i].data.id].expanded = true
          }
        }
      }
      // 使用节点的数据来查找对应的 DOM 节点
      this.$refs.tree.setCurrentKey(scrollToData)
      setTimeout(() => {
        //根据树id 找到高亮的节
        let node = document.querySelector('.c-tree-content .is-current');
        if (node) {
          setTimeout(() => {
            node.scrollIntoView({block:"center"}); //有bug，可尝试
          }, 500);
        }
      }, 0);
    },
    // 获取所有父级节点
    getParentAll(node) {
      if (node) {
        this.nodeParentAll = []
        // 节点的第一个父级
        var parentNode = node.parent
        // level为节点的层级 level=1 为顶级节点
        for (var j = 0, lv = node.level; j < lv; j++) {
          if (parentNode.level > 0) {
            // 将所有父级节点放入集合中
            this.nodeParentAll.push(parentNode)
          }
          // 继续获取父级节点的父级节点
          parentNode = parentNode.parent
        }

        if (this.nodeParentAll.length > 1) {
          // 如果集合长度>1 则将数组进行倒叙.reverse() 其是就是将所有节点按照 从 顶级节点 依次往下排
          this.nodeParentAll.reverse()
        }
      }
    },

大概记录下...................................................................................备用