el-select多选 如何实现宽度自适应？

Question

<div class="auto-select">
            <el-select v-model="value1" multiple placeholder="请选择" ref="select" id="select" @change="changeEv">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" id="option">
                </el-option>
            </el-select>
        </div>
data () {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value1: []
        };
    },
data () {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value1: []
        };
    },

Answer 1

不是默认提供了两种形式吗，都不符合你的需求？一定要横过来的话，倒是可以通过改写CSS的方式来实现，就是会比较麻烦。

.el-select {
  width: auto;
  height: 40px;
  padding-right: 20px;
  border: 1px solid #e8eaef;
  border-radius: 4px;
  &__tags {
    max-width: none !important; // 因为js会生成行内样式所以只能使用 !important
    height: 40px;
    padding: 0 10px 0 5px;
    transform: none;
    position: static;
  }
  & > .el-input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    .el-input__inner {
      background-color: transparent;
      border: none;
      padding-left: 0;
      padding-right: 0;
    }
  }
}

以上CSS样式你需要按照具体业务情况使用样式穿透，不然会污染到全局。

Answer 2

多选不是默认会换行么，你是覆盖了它的样式么