一、效果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/af5caec7fb620e9bd70965e7b8b83323.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1933577cc1704eda751cf4219d81c2a6.png)
二、实现:
<template>
<div class="dashboard-container">
<el-select v-model="value" placeholder="请选择" clearable class="autowidth-select">
<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-select>
</div>
</template>
<script>
export default {
name: 'Dashboard',
data() {
return {
value: '',
options: [
{ value: 1, label: '测试' },
{ value: 2, label: '测试12332' },
{ value: 3, label: '测试364阿鲁方式等有发生过还不是还没来不服输的VS阿布' }
]
}
},
}
</script>
<style scoped>
.autowidth-select {
min-width: 180px;
}
.autowidth-select >>>.el-input__prefix {
position: relative !important;
left: 0;
box-sizing: border-box;
border: 1px solid
padding: 0 30px;
height: 40px;
line-height: 40px;
visibility: hidden;
}
.autowidth-select >>> input {
position: absolute;
}
</style>