1、问题描述
在使用el-select的时候,经常遇见下拉框里要放多个值,比如:文字描述(统计) 例:人数(100),然后文字描述超出隐藏,所有我们就会在el-select内部加入东西
<el-select v-model="value" size="small">
<el-option
v-for="(item,index) in list"
:key="item.value"
:label="item.label"
:value="item.value">
<div class="flex alignCenter">
<span class="label p_nowrap">{{item.label}}</span>
<span class="total" >
{{' (' + item.total + ')'}}
</span>
</div>
</el-option>
</el-select>
看着毫无问题,但是当下拉框出现时,无法进行滚动,滚动下拉框就消失
2、解决方案
<el-select v-model="value" size="small">
<el-option
v-for="(item,index) in list"
:key="item.value"
:label="item.label"
:value="item.value">
<span class="label p_nowrap">{{item.label}}</span>
<span class="total" >
{{' (' + item.total + ')'}}
</span>
</div>
</el-option>
</el-select>
解决方案就是将el-option内部的div去掉换成span,具体因为啥,我没有细细研究,可能是elementui的版本BUG