【VUE】Vue ElementUI el-select下拉框最后一行未全部展开

1.代码如下:

<el-form :model="conditionForm" :rules="formRules">
	<el-select v-model="conditionForm.teleType" style="width: 120px" value="haha">
		<el-option v-for="item in options" :label="item.text" :key="item.value" :value="item.value">
	    el-option>
	el-select>
el-form>
<script>
	export default {
	   data() {
	      return {
	        conditionForm: {
	          teleType: ""
	        },
	        options: [
	          {value: 'ALL', text: "全部"},
	          {value: 'SITA', text: "SITA"},
	          {value: 'AFTN', text: "AFTN"}
	        ]
	      }
	   }
	}
</script>

2.效果
【VUE】Vue ElementUI el-select下拉框最后一行未全部展开_第1张图片
3.分析
使用了el-scrollbar,为了防止出现横向滚动条,增加了

.el-scrollbar__wrap {
	overflow-x: hidden;
} 

导致这个问题。

4.解决方法,增加如下代码:

.el-select-dropdown .el-scrollbar .el-scrollbar__wrap{
    overflow: scroll;
}

5.效果
【VUE】Vue ElementUI el-select下拉框最后一行未全部展开_第2张图片

你可能感兴趣的:(前端,vue)