element中select下拉框如何实现宽度自适应

测试提了一个优化需求，使用下拉框选择时 ，根据选择的内容实现自适应的效果;如果使用element自带的select的选择器模块，它默认的select选择框的宽度是固定的。

那么我们要做的效果是这样的，select选择框的宽度随着你选择的内容变化而自适应的。给用户的操作感觉会比较好。

实现思路：
1.不能给输入框直接设置固定宽度，考虑动态获取选择内容的宽度，然后再赋值给选择框的宽度样式，没有这样操作，感觉会比较麻烦，刷新的话会存在问题。
2.查阅了element的select组件的文档，它是有模板方法的，这里使用了prefix这个slots方法，将其作为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>

重点是{{ (options.find(item => item.value === value)|| {}).label }}这个代码；意思是，查找对应的选择内容，将其作为模板内容渲染在页面。然后使用这个内容代替原来的选择框默认内容，覆盖掉原来的样式，达到自适应的母的。
css样式如下:

.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;   //这里一定需要给，给内容进行定位
}