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

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

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>

设置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%;
}

以上是编程学习网小编为您介绍的“el-select设置多选功能（multiple）不换行”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。