element-ui的el-select根据内容自定义宽度

场景：el-select只能固定宽，内容很长的时候希望宽度根据内容自定义

<el-select clearable class="autoWidth" v-model="value" placeholder="请选择">
          <template slot="prefix" >
              {{ (options.find(item => item.value === value)|| {}).label }}
          </template>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
<script>
export default {
  name: "dd",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面龙须面龙须面龙须面龙须面龙须面龙须面龙须面龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
};
</script>

.autoWidth {
  min-width: 120px;   //设置最小的宽度
  text-align: start;  // 这里是个坑，由于我是在vue中挂载的页面，如果给app的样式设置了text-align：center后，这里是需要重新设置start 否则选择框内的内容是默认居中，会造成未选择内容和选择内容时样式不对
}
.autoWidth >>> .el-input__prefix {  // 这里直接时复制原来的input的样式，给.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;   //这里一定需要给，给内容进行定位
}