el-select设置多选功能（multiple）不换行

功能介绍：在el-select中经常会用到multiple多选功能，但是里面会有一个问题，文字超出了当前大小会自动换行，下面web建站小编给大家介绍一种方法，随之多选的增加自适应变宽。

template代码新增workTypeWidth

复制代码<el-form-item
  label="上班时间"
  prop="workType"
  :style="{ width: workTypeWidth }"
>
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

设置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 = "";
  }
},
1
2
3
4
5
6
7
8
9
10
11

设置select相关样式

复制代码.el-form-item__content, .el-select {
  width: 100%;
}
1
2
3

vscode如何设置自动格式化但不换行

el-select的几个点击事件方法介绍

el-select/el-input清空方法调用

百度echarts X轴内容太长的四种解决方案

Visual studio code配置选项大全

标签： el-select, multiple, 不换行, 多选, 自适应

上面是“el-select设置多选功能（multiple）不换行”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2508.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！