el-tree实现定位功能

根据初始搜索关键字，实现定位功能，如图：

该功能是根据初始的搜索关键字，获取该关键字对应的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>