Dynamically Adjusting el-select Width Based on Selected Content in Vue

The author faced a requirement to dynamically set the width of an el-select component because some option labels are extremely long, such as "中华人民共和国/广西壮族自治区/南宁市/西乡塘区", which can cause the content to overflow the select box.

Common approaches like adding a tooltip or truncating the label were rejected by the client, who insisted that the select box itself should expand its width to accommodate the full label when an option is chosen.

Inspecting the component in the browser reveals that el-select is wrapped by a div with class el-input--suffix , which contains an input element whose width is set to 100% and determines the outer div's width.

The solution is to place an additional element at the same level as the inner input that displays the selected option's label. As the label grows, it pushes the outer div wider, achieving the desired dynamic width.

Element UI provides a prefix slot that can be used for this purpose. By adding a prefix slot, setting its position to relative , and changing the input to absolute positioning, the prefix content (bound to the computed optionLabel ) expands the select width.

<template>
  <div>
    <el-select class="autoWidth" v-model="value" placeholder="请选择">
      <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: 0; visibility: hidden; }
::v-deep .autoWidth input { position: absolute; }
.autoWidth {
  &.has-content {
    ::v-deep .el-input__suffix { right: 5px; }
  }
  &:not(.has-content) {
    ::v-deep .el-input__suffix { right: -55px; }
  }
}
</style>

Further adjustments hide the prefix element, set a minimum width for the select, and correct the alignment of the dropdown arrow when no content is selected by tweaking the .el-input__prefix padding and visibility.

The final code combines the template, script, and scoped SCSS shown above, delivering a fully functional el-select that expands its width according to the length of the selected option label while maintaining proper visual alignment.