2025年03月07日 建站教程
功能介绍：在el-select中经常会用到multiple多选功能，但是里面会有一个问题，文字超出了当前大小会自动换行，下面web建站小编给大家介绍一种方法，随之多选的增加自适应变宽。
template代码新增workTypeWidth
<el-form-item
label="上班时间"
prop="workType"
:
>
<el-select
v-model="searchForm.workType"
placeholder="请选择"
size="small"
multiple
@change="changeWorkType"
>
<el-option
v-for="item in searchForm.workTypeOptions"
:key="item.id"
:label="item.workType"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
设置changeWorkType方法
changeWorkType(e) {
if (e.toString().length > 40) {
let workTypeWidth = e.toString().length / 1.8; //宽度根据字的长度定义
this.workTypeWidth = workTypeWidth + "%";
if (workTypeWidth > 100) {
this.workTypeWidth = "100%"; //宽度不能超过100%
}
} else {
this.workTypeWidth = "";
}
},
设置select相关样式
.el-form-item__content, .el-select {
width: 100%;
}
本文链接：http://so.lmcjl.com/news/24463/