用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>