el-select 实现动态宽度

el-select的结构是一个el-input--suffix的div包裹着一个input ,内层input的宽度是100%，外层div的宽度是由这个内层input决定的。也就是说，内层input的宽度如果动态增加，外层div的宽度也会随之增加,为了让我们的el-select宽度能够跟着内容走，我们可以在内层input同级别增加一个元素，内容就是用户选中的内容。内容越多，它就像一个胃口很大的小朋友，把外层div的宽度撑开,我们添加一个prefix的插槽，再把prefix的定位改成relative，并且把input的定位改成绝对定位absolute。最后将prefix的内容改成我们的选项内容

<template>
  <div>
    <el-select
      class="autoWidth"
      :class="{ 'has-content': optionLabel }"
      v-model="value"
      placeholder="请选择"
      clearable
    >
      <template slot="prefix">
        {{ optionLabel }}
      </template>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "中华人民共和国/广东省/深圳市/福田区",
        },
        {
          value: "选项2",
          label: "中华人民共和国/广西壮族自治区/南宁市/西乡塘区",
        },
        {
          value: "选项3",
          label: "中华人民共和国/北京市",
        },
        {
          value: "选项4",
          label: "中华人民共和国/台湾省",
        },
        {
          value: "选项5",
          label: "中华人民共和国/香港特别行政区",
        },
      ],
      value: "",
    };
  },
  computed: {
    optionLabel() {
      return (this.options.find((item) => item.value === this.value) || {})
        .label;
    },
  },
};
</script>
<style lang="scss" scoped>
.autoWidth {
  min-width: 180px;
}
::v-deep .autoWidth .el-input__prefix {
  position: relative;
  box-sizing: border-box;
  border: 1px solid #fff;
  padding: 0 30px;
  height: 40px;
  line-height: 40px;
  left: 0px;
  visibility: hidden;
}

::v-deep .autoWidth input {
  position: absolute;
}
.autoWidth {
  // 当.has-content存在时设置样式
  &.has-content {
    ::v-deep .el-input__suffix {
      right: 5px;
    }
  }
  // 当.has-content不存在时的默认或备选样式
  &:not(.has-content) {
    ::v-deep .el-input__suffix {
      right: -55px;
    }
  }
}
</style>