一、效果
![](https://i-blog.csdnimg.cn/blog_migrate/0a99b2ee3a535dfd2ce076c19d084d3c.gif)
二、代码
<template>
<el-select class="autoWidth-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>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '炒面炒面炒面'
}, {
value: '选项2',
label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
}, {
value: '选项3',
label: '蚵仔煎蚵仔煎蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '选项1'
}
},
}
</script>
<style scoped >
.autoWidth-select {
min-width: 120px;
}
.autoWidth-select >>> .el-input__prefix{
position: relative;
left: 0px;
box-sizing: border-box;
border: 1px solid #ffffff00;
padding: 0 30px;
height: 40px;
line-height: 40px;
visibility: hidden;
}
.autoWidth-select >>> input{
position: absolute;
}
</style>