Vue封装select下拉树形选择组件(支持单选，多选，搜索)，基于element-ui的select、tree组件
效果图
解决了一些细节性的问题
- 使用el-select自带的滚动效果（原生有点丑，且占据空间）
- 解决展开树时的动画抖动
- 点击选中树形数据时，select弹窗不自动关闭
- 选择数据关闭弹窗后再次打开弹窗，滚动条永远在最底部，不能定位到具体选择的数据处
template结构
<el-select class="select">
<el-option class="option">
<el-tree class="tree"></el-tree>
</el-option>
</el-select>一个三级嵌套就可以搞定
css部分
看了下网上的办法，大多都是直接在option上写样式，给option加一个高度，然后overflow: auto。但是这样写会出现问题， 因为select本身使用的是element-ui自己的滚动条组件， max-height为274px，一旦option设置高度过大，会出现双重滚动条，而且原生滚动条真的有点丑。其实这里只需要给option加一个height: auto，就可以使用select自带的滚动条，不需要单独再加其他滚动方式。
同时也发现两个问题
1. 当树展开的时候，动画不流畅，会抖动一下。分析了一下已有的css，发现是因为option本身设置了 line-height: 34px；而树形里没有设置line-height，设置的是高度为26px。这里直接把option的line-height改为1，果然动画流畅了，舒服了。
2. 当option被选中时，树节点所有的文字都会加粗，随便设置一个font-weight: 400就行。
.option {
height: auto;
line-height: 1;
padding: 0;
background-color: #fff;
.tree {
padding: 4px 20px;
font-weight: 400;
}js部分
要解决几点
1. 当点击选中树的节点时，下拉框不会自动隐藏，感觉体验不太好。查看文档，select组件也没有控制下拉框显示隐藏的属性，然后在select组件源码中找到了visible属性，用来控制下拉框显示隐藏。
点击选中树的节点时设置 this.$refs.select.visible = false 即可。
2. 数据回显，通过tree的setCurrentKey方法设置当前高亮的节点，通过getNode方法获取当前id对应的node，拿到对应的label。
3. 不管选没选择树的节点，打开下拉框的时候，滚动条永远在最底部，实在是太难受了，而一想到是不是不能借助select的滚动，而要给option设置滚动时就更难受了。但是option设置滚动后，发现滚动条永远在最顶部，舒服了，也有问题。
突然想到，一个正常不魔改的select组件，无论选中哪个option，打开下拉框总能定位到当前选中的option，这肯定是select组件内部有个方法实现的，偷过来用就行。然后就在源码中找到了这个：
scrollToOption(option) {
const target = Array.isArray(option) && option[0] ? option[0].$el : option.$el;
if (this.$refs.popper && target) {
const menu = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');
scrollIntoView(menu, target);
this.$refs.scrollbar && this.$refs.scrollbar.handleScroll();
scrollToOption？拿来吧你
很明显，要传入一个option对象或者数组，为对象的时候，option的$el属性是一个dom，它的表现形式就是一个Vue的实例，我这边直接用querySelector获取一个dom， 传入{ $el: dom }也能用。再然后就是找这个dom，发现当树某一节点被点击时，其class会多一个is-current，那么就可以这样写：
let selectDom = document.querySelector('.is-current')
//好像不能使用document.querySelector()，这样一个页面有多个组件肯定会有点小问题
this.$refs.select.scrollToOption({$el: selectDom})
ps: 只针对单选做的，多选还需按照情况改改。
组件全部代码（新增multiple 多选模式默认 false）
<template>
<el-select
:title="multiple? optionData.name : ''"
ref="select"
:value="value"
placeholder="请选择"
size="mini"
clearable
:disabled="disabled"
:filterable="filterable"
:filter-method="filterMethod"
style="width: 100%;"
@clear="clear"
@visible-change="visibleChange"
<el-option
ref="option"
class="tree-select__option"
:value="optionData.id"
:label="optionData.name"
<el-tree
ref="tree"
class="tree-select__tree"
:class="`tree-select__tree--${multiple ? 'checked' : 'radio'}`"
:node-key="nodeKey"
:data="data"
:props="props"
:default-expanded-keys="[value]"
:show-checkbox="multiple"
:highlight-current="!multiple"
:expand-on-click-node="multiple"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
@check-change="handleCheckChange"
></el-tree>
</el-option>
</el-select>
</template>
<script>
export default {
name: 'TreeSelect',
props: {
// v-model绑定
value: {
type: [String, Number],
default: ''
multiple: {
type: Boolean,
default: false
// 树形的数据
data: {
type: Array,
default: function () {
return []
// 每个树节点用来作为唯一标识的属性
nodeKey: {
type: [String, Number],
default: 'id'
filterable: {
type: Boolean,
default: false
disabled: {
type: Boolean,
default: false
// tree的props配置
props: {
type: Object,
default: function () {
return {
label: 'label',
children: 'children'
data() {
return {
optionData: {
id: '',
name: ''
filterFlag: false
watch: {
value: {
handler(val) {
if (!this.isEmpty(this.data)) {
this.init(val)
immediate: true
data: function (val) {
if (!this.isEmpty(val)) {
this.init(this.value)
created() {},
methods: {
// 是否为空
isEmpty(val) {
for (let key in val) {
return false
return true
handleNodeClick(data) {
if (this.multiple) {
return
this.$emit('input', data[this.nodeKey])
this.$refs.select.visible = false
handleCheckChange() {
const nodes = this.$refs.tree.getCheckedNodes()
const value = nodes.map((item) => item[this.nodeKey]).join(',')
this.$emit('input', value)
init(val) {
// 多选
if (this.multiple) {
const arr = val.toString().split(',')
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys(arr)
const nodes = this.$refs.tree.getCheckedNodes()
this.optionData.id = val
this.optionData.name = nodes
.map((item) => item[this.props.label])
.join(',')
// 单选
else {
val = val === '' ? null : val
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(val)
if (val === null) {
return
const label = this.props.label || 'name'
const node = this.$refs.tree.getNode(val)
this.optionData.id = val
this.optionData[label] = node.label
visibleChange(e) {
if (e) {
const tree = this.$refs.tree
this.filterFlag && tree.filter('')
this.filterFlag = false
let selectDom = null
if(this.multiple) {
selectDom = tree.$el.querySelector('.el-tree-node.is-checked')
} else {
selectDom = tree.$el.querySelector('.is-current')
setTimeout(() => {
this.$refs.select.scrollToOption({ $el: selectDom })
}, 0)
clear() {
this.$emit('input', '')
filterMethod(val) {
this.filterFlag = true
this.$refs.tree.filter(val)
filterNode(value, data) {
if (!value) return true
const label = this.props.label || 'name'
return data[label].indexOf(value) !== -1
</script>
<style lang="scss">
.tree-select__option {
&.el-select-dropdown__item {
height: auto;
line-height: 1;
padding: 0;
background-color: #fff;
.tree-select__tree {
padding: 4px 20px;
font-weight: 400;
&.tree-select__tree--radio {
.el-tree-node.is-current > .el-tree-node__content {
color: $mainColor;
font-weight: 700;
</style>
页面中使用（新增支持搜索功能 filterable）
<template>
<div class="container">
<cy-tree-select v-model="value" filterable :data="list"></cy-tree-select>
</div>
</template>
<script>
export default {
data() {
return {
list: [{
label: '系统',
id: 1,
children: [
{ label: '用户', id: 2 },
{ label: '用户组', id: 3 },
{ label: '角色', id: 4 },
{ label: '菜单', id: 5 },
{ label: '组织架构', id: 6 }
label: '商品',
id: 7,
children: [
{ label: '列表', id: 8 },
{ label: '添加', id: 9 },
{ label: '修改', id: 10 },
{ label: '删除', id: 11 },
{ label: '商品分类', id: 12 },
{ label: '分类修改', id: 13 }