1. 自动展开使用 automaticDropdown 属性控制（可以看源码里 props 下面有该属性，是一个布尔值）
<el-select ref="selectFeature" | |
v-model="feature" | |
id="selectFeatureBox" | |
clearable | |
@change = "changeFeature" | |
placeholder = "Please choose one new feature" | |
filterable | |
size='mini' | |
style="min-width: 600px;position: absolute;right:10px;top:5px;" | |
:automaticDropdown="autoDropdown"> | |
<el-option v-for="item in featureOptions" :key="item.value" :label="item.label" :value="{value:item.value, label:item.label, urls:item.urls}"> | |
<span style="float: left"></span> | |
<span v-if="['Feature1', 'Feature2'].indexOf(item.value) > -1 || item.urls.length > 0" | |
style="float: right; font-weight: 700;color: #12adec; font-size: 12px;">Flag & Label</span> | |
</el-option> | |
</el-select> |
this.autoDropdown = true | |
this.$refs.selectFeature.focus() |
2. 自动展开有个高度设置，在 mount 里指定
mounted() { | |
this.$nextTick(() => { | |
let selectDropDownNode = document.getElementsByClassName('el-select-dropdown__wrap') | |
for (let i = 0; i < selectDropDownNode.length; i++) { | |
selectDropDownNode[i].style.maxHeight = '500px' | |
} | |
}) | |
} |
附：
针对高度设置，这里有两个尝试没有成功，记录一下
（1）尝试给 el-select 设置一个 id，在 js 里通过对 id 选择器进行 dom 操作，尝试修改 style，尝试多次没有生效，后来发现 el-select 展开后的弹出层 div 是和 vue app 是平级（兄弟级）的，没有父子关系，所以肯定是无效的
(2) 尝试操作 css 也没有生效
<style lang="scss" scoped> | |
.el-select-dropdown { | |
max-height: 500px; | |
} | |
.el-select-dropdown__wrap { | |
max-height: 500px; | |
} | |
</style> |
