此笔记主要为了记录使用element-plus的选择器遇到的需求,问题。
vue3+element-plus
1、下拉框内容超宽(增加横向滚动条)
问题描述:由于绿色下划线的内容超宽,导致整个下拉框的宽度超过了上方框框的宽度。
解决方案:设置定宽,使下拉框出现横向滚动条
通过 width="280px"给el-select设置宽度。style="width: 280px"给el-option设置宽度
<el-select
width="280px"
clearable
placeholder="请选择仓库"
v-model="form.storeId"
@change="selectStore"
>
<el-option
:key="index"
:label="item.storeName"
:value="item.id"
v-for="(item, index) in storeList"
style="width: 280px" />
</el-select>
一定要加scoped,不然会影响全局。
<style scoped>
.el-select-dropdown {
max-width: 40%;
}
.el-select-dropdown__item {
overflow: visible;
}
</style>