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

Z时代
2024-02-05
分类：IT

<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: []
        };    },

回答：

el-select多选如何实现宽度自适应？
不是默认提供了两种形式吗，都不符合你的需求？一定要横过来的话，倒是可以通过改写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;
    }
  }}