情景:
问题:单选选中之后,再次打开,不会定位到当前下拉勾选/选中项位置。
发现:多选可以定位到选中位置。
解决办法:用多选代替单选框,只要每次勾选后、替换前一次所选的值,即可实现单选的效果(但是下拉框不自动关闭,所以需要再手动关闭下拉框即可)。
如图:
单选(打开): 多选(打开):
效果:el-select 多选 ,选择下拉内容后自动关闭
html:
<el-select
ref="multiSelect"
v-model="selectName"
filterable
multiple
value-key="userid"
@change="chooseCustom">
<el-option v-for="(item, index) in customList"
:key="index"
:label="item.username"
:value="item"
/>
</el-select>
js:
chooseCustom(){
//调用element-ui select组件blur方法
//要包再timeout里面,直接调用不会关闭下拉框option
setTimeout(() => {
this.$refs.multiSelect.blur()
}, 50)
}
ps:
1、试过获取单选的scrolltop,通过scrolltop定位,但是没获取到scrolltop(一直为0)
2、试过通过直接获取到下拉option框dom,并直接display:none;(是可以关闭,但下拉箭头未改变,且组件中的visible等值未变,打开时,需要点击两下才能再次打开 -- 第一下关闭下拉框并修改值等,才会再次打开),所以不可只是单纯的将dom元素display掉