<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) {
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 ) {
if (it.offsetTop > treeHeight) {
this.$refs.treeWrapper.scrollTop = it.offsetTop - 50
} else {
this.$refs.treeWrapper.scrollTop = 0
}
}
})
})
}, 500);
}