用element-ui实现树形控件搜索定位功能

这是自己写的一个组件。
只能实现在树形控件默认完全展开的情况下进行定位搜索，
但是一开始默认是合上就会出问题，还没能解决，如果大佬能解决，请告诉我~！

子页面-自行修改变量名（写的搜索定位组件）

<template>
  <div>
    <el-autocomplete
      ref="searchInput"
      popper-class="drop-search"
      v-model="state"
      :fetch-suggestions="querySearch"
      size="mini"
      clearable
      placeholder="请输入搜索内容"
    >
      <i class="el-icon-search el-input__icon" slot="prefix" @click="handleIconClick"></i>
      <el-tree
      row-key="menuId"
        class="tree"
        :data="tableData"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :default-expand-all="true"
        @node-click="nodeClick"
        ref="tree"
      >
        <span slot-scope="{ node, data }">
          <span :title="data.menuName">{{ data.menuName }}</span>
        </span>
      </el-tree>
    </el-autocomplete>
  </div>
</template>

<script>
export default {
  props: ["tableData"],
  watch: {
    state(val) {
      this.$refs.tree.filter(val);
    }
  },
  data: () => ({
    state: "",
    searchLabel: "名称",
    parent: "",

    defaultProps: {
      children: "children",
      label: "menuName"
    }
  }),
  methods: {
    querySearch(queryString, cb) {
      var restaurants = [{ value: "" }];
      var results = queryString
        ? restaurants.filter(restaurant => {
            return true;
          })
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    handleIconClick(ev) {
      // console.log("输出",ev);
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.menuName.indexOf(value) !== -1;
    },
    nodeClick(data, node, obj) {
      console.log("四个数据","项1",data, "项2",node, "项3",obj, "项4",this.parent);
      this.$refs.searchInput.close();
      this.state = data.menuName;
      this.parent.$refs.singleTable.setCurrentRow(node.data);
      //   innerText
      // console.log("$el的值",this.parent.$refs.singleTable)
      let rows = this.parent.$refs.singleTable.$el.children[2].children[0]
        .children[1].rows;
      //   console.log(rows);
      for (let i in rows) {
        if (rows[i].cells[0].innerText.trim() == data.menuName) {
          
          // console.log("找到匹配项：", data.menuName);
          rows[i].scrollIntoView({ block: "center" });
          this.$parent.trId=data.menuId
         console.log("父组件内容",this.$parent);
          break;
        }
      }
    },
    getParent() {
      let parent = this.$parent;
      let flag = true;
      while (flag) {
        parent.name == "menu-table"
          ? (flag = false)
          : (parent = parent.$parent);
      }
      this.parent = parent;
    }
  },
  mounted() {
    // 自定义clear函数覆盖原本的handleClear函数，解决清除后下拉框消失问题
    this.$refs.searchInput.handleClear = () => {
      this.state = "";
      this.$refs.searchInput.focus();
    };

    this.getParent();
  }
};
</script>

<style scoped lang="scss">
</style>

父页面，导入这个search组件

import Search from "./search";

  //组件命名
  components: {
    "my-search": Search,
  },

把定义好的组件放入html中

  <!-- 搜索定位 -->
  <my-search ref="search" class="searchPos" :tableData="tableData"></my-search>