如何实现Element UI multiple select宽度随选中项自动增长

要实现Element UI多选选择器的弹性宽度效果，只需覆盖组件默认的固定宽度样式即可，具体修改如下：

1. 新增覆盖样式 #

你可以直接在项目的全局样式或者当前页面的样式中加入以下代码：

/* 无scoped的全局样式 */
.el-select {
  width: auto;
  min-width: 120px; /* 可自定义最小宽度，避免未选择内容时宽度过窄 */
}
.el-select .el-select__tags {
  flex-wrap: nowrap; /* 标签不换行，自动撑开容器宽度 */
  white-space: nowrap;
}
.el-select .el-select__tags > span {
  flex: none;
}

如果你的样式加了scoped属性，需要使用深度选择器：

/* 带scoped的单文件组件样式 */
::v-deep .el-select {
  width: auto;
  min-width: 120px;
}
::v-deep .el-select .el-select__tags {
  flex-wrap: nowrap;
  white-space: nowrap;
}
::v-deep .el-select .el-select__tags > span {
  flex: none;
}

2. 完整可运行示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>弹性宽度多选选择器</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/index.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css">
  <style>
    .el-select {
      width: auto;
      min-width: 120px;
    }
    .el-select .el-select__tags {
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .el-select .el-select__tags > span {
      flex: none;
    }
  </style>
</head>
<body>
<div id="app">
  <el-select v-model="value" multiple placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</div>
<script>
var Main = {
    data() {
      return {
        options: [{
          value: 'Option1',
          label: 'Option1'
        }, {
          value: 'Option2',
          label: 'Option2'
        }, {
          value: 'Option3',
          label: 'Option3'
        }, {
          value: 'Option4',
          label: 'Option4'
        }, {
          value: 'Option5',
          label: 'Option5'
        }, {
          value: 'Option6',
          label: 'Option6'
        }],
        value: ''
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>

可选优化 #

如果需要限制最大宽度，避免选择内容过多导致选择器过宽，可以给.el-select添加max-width属性，同时调整el-select__tags的换行规则：

.el-select {
  width: auto;
  min-width: 120px;
  max-width: 500px; /* 自定义最大宽度 */
}
.el-select .el-select__tags {
  flex-wrap: wrap; /* 超出最大宽度后标签换行 */
}

内容的提问来源于stack exchange，提问作者guyaloni