el-select 多选框如何自适应宽度，不换行

之前B站上面看过一位大佬的视频，el-select下拉框的宽度自适应，在前面实现过单选的自适用，主要是使用prefix插槽渲染。

element默认的是多选会换行，可以适用于大部分场景，但是有些特定的场景就不适用了

例如与其他输入框或单选框一起用时，会导致整体高度变高，所以需要单独处理
考虑的两种方式：
1.动态获取拿到的多选内容，动态判断内容，然后使用行内style属性给width赋值，目前没有使用这种方式处理，觉得会麻烦一点
2.使用了prefix这个插槽方法
使用的框架是vue，

<el-select multiple class="autoWidth" v-model="value" placeholder="请选择">
      <template slot="prefix">
        {{filterList}}    // 这里是模仿选中的内容，强制一行排列
      </template>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面龙须面龙须面龙须面龙须面龙须面龙须面龙须面龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: [],
      a:[]
    };
  },
  computed: {    // 这里使用计算属性实时拿到对应的选中内容，然后进行处理
    filterList() {
      const a = []
      this.options.forEach((item) => {
        this.value.forEach((item1) => {
          if (item.value === item1) {
            a.push(item.label + "xx");    // xx这里是仿制选中后的X图标，可以自行设置，如果要求不太严格可以自行设置宽度
          }
        });
      });
      return a.join();
    },
  },

样式：

.autoWidth {
  min-width: 120px;
  text-align: start;
}
.autoWidth .el-select__tags {
  flex-wrap: nowrap;
}
.autoWidth .el-input__prefix {
  position: relative;
  box-sizing: border-box;
  border: 1px solid #ffffff00;
  padding: 0 40px;
  height: 40px;
  line-height: 40px;
  color: #606266;
  left: 0;
  visibility: hidden;
}
.autoWidth .el-input__inner {
  position: absolute;
}

最后效果如下：其实效果出来了，还是有点粗糙，web端样式要求没那么严格可以用，如果是严格按照设计图就需要调整对应样式，建议就可以动态设置width的方式