el-select选择器文字长度跟随选择器宽度自适应

756 阅读1分钟

1000.png

100001.png

100002.png

<el-select class="auto_select" v-model="value" placeholder="请选择">
      <template slot="prefix">{{(options.find(s=>s.value===value)||{}).label}}</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: '',
            }
        }
        
        <style lang="less" scoped>
          .auto_select {
            margin-top: 30px;
            min-width: 120px;
          }
          .auto_select ::v-deep .el-input__prefix {
            position: relative;
            left: 0px;
            box-sizing: border-box;
            border: 1px solid #fff;
            padding: 0 30px 0 15px;
            height: 40px;
            line-height: 40px;
            visibility: hidden;
          }
          .auto_select ::v-deep input {
            position: absolute;
            padding: 0 30px 0 15px;
          }
      </style>