根据初始搜索关键字,实现定位功能,如图:
该功能是根据初始的搜索关键字,获取该关键字对应的id,设置高亮,因为高亮才会有.is-current,this.$refs.treeData.store._getAllNodes()是获取树的全部节点。
created(){
this.$nextTick(()=>{
for (let i = 0; i < this.$refs.treeData.store._getAllNodes().length; i++) {
if(this.$refs.treeData.store._getAllNodes()[i].data.label===this.selectData){
this.$refs.treeData.setCurrentKey(this.$refs.treeData.store._getAllNodes()[i].data.id);
}
}
})
该功能实现定位效果
triggerVisible(visible) {
if (visible && this.selectData) {
this.$nextTick(() => {
let nodeOffsetTop = document.querySelector('.select-tree .is-current').offsetTop
if (nodeOffsetTop > 120) {
document.querySelector('.public-select-tree-options').scrollTop = nodeOffsetTop - 120 / 2
}
})
}
},
完整代码如下
<template>
<div id="app">
<el-select ref="selectTree" v-model="selectData" placeholder="请选择" clearable @visible-change="triggerVisible"
style="position:initial;width: 100%">
<el-option value="el-tree" class="public-select-tree-options">
<el-tree :data="data" ref="treeData" highlight-current :props="defaultProps" default-expand-all
@node-click="handleNodeClick" class="select-tree" node-key="id">
</el-tree>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectData: '三级 2-2-1',
data: [{
id: 1,
label: '一级 1',
children: [{
id: 11,
label: '二级 1-1',
children: [{
id: 111,
label: '三级 1-1-1'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 22,
label: '二级 2-1',
children: [{
id: 222,
label: '三级 2-1-1'
}]
}, {
id: 3,
label: '二级 2-2',
children: [{
id: 31,
label: '三级 2-2-1'
}]
}]
}, {
id: 4,
label: '一级 3',
children: [{
id: 44,
label: '二级 3-1',
children: [{
id: 444,
label: '三级 3-1-1'
}]
}, {
id: 5,
label: '二级 3-2',
children: [{
id: 55,
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
created(){
this.$nextTick(()=>{
for (let i = 0; i < this.$refs.treeData.store._getAllNodes().length; i++) {
if(this.$refs.treeData.store._getAllNodes()[i].data.label===this.selectData){
this.$refs.treeData.setCurrentKey(this.$refs.treeData.store._getAllNodes()[i].data.id);
}
}
})
},
methods: {
handleNodeClick() {
let $object = this.$refs.treeData.getCurrentNode();
this.selectData = $object.label;
this.$refs.selectTree.blur();
},
triggerVisible(visible) {
if (visible && this.selectData) {
this.$nextTick(() => {
let nodeOffsetTop = document.querySelector('.select-tree .is-current').offsetTop
if (nodeOffsetTop > 120) {
document.querySelector('.public-select-tree-options').scrollTop = nodeOffsetTop - 120 / 2
}
})
}
},
},
}
</script>
<style>
.public-select-tree-options {
height: 150px !important;
padding: 10px 0;
background-color: #fff !important;
overflow-y: auto !important;
overflow-x: hidden;
}
.select-tree {
width: 100%;
}
</style>