项目需求,将下拉框改成如图的样式
<el-select v-model="seletValue" placeholder="" @change="getValue($event)" popper-class="operateDropOption"
:popper-append-to-body="false">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
//文字前面的图片
<img :src="
item.selet==1
? require('@/assets/images/皮带1.svg')
: require('@/assets/images/皮带2.svg')"
style="margin-right: 5px;vertical-align: middle;">
//文字后面的图片
<img src="@/assets/images/皮带2.svg" alt="" style="margin-right: 5px;vertical-align: middle;" :selet="item.selet ? 2 : ''"> -->
//中间的文字
<span>{{item.label}}</span>
<img :src="
item.selet==1
? ' '
: require('@/assets/images/手.svg')"
style="margin-left: 15px;vertical-align: middle;">
</el-option>
</el-select>
data() {
return {
seletValue: "暂无数据",
options: [
{ value: '选项1', label: '黄金糕',selet:1 },
{ value: '选项2', label: '双皮奶',selet:1 },
{ value: '选项3', label: '蚵仔煎',selet:1 },
{ value: '选项4', label: '龙须面',selet:1 },
{ value: '选项5', label: '北京烤鸭',selet:1 }
],
}
}
methods: {
getValue(val) {
this.options.map((item)=>{
//当选中当前的列时,图标变色,要重新给一个值
if(item.value==val){
item.selet=2
}else{
item.selet=1
}
})
},
}
<style lang="scss">
//下拉框的样式的改变
.operateDropOption{
border: none;
//滚动条样式的改变
.el-scrollbar__thumb{
background: linear-gradient(left,rgba(20, 137, 251, 1), rgba(141, 201, 255, 1));
}
.el-select-dropdown{
border: none;
padding-bottom:10px;
background: RGBA(20, 31, 59, 1);
}
.el-scrollbar__wrap{
background: RGBA(20, 31, 59, 1);
}
.el-select-dropdown__item{
color: #fff;
text-align: left;
text-indent: 20px;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: RGBA(15, 23, 46, 1);
}
.el-select-dropdown__item.selected {
color: #409EFF;
}
//三角的样式的改变
&.el-popper .popper__arrow{
left: 50% !important;
}
&.el-popper .popper__arrow::after {
border-bottom-color: RGBA(20, 31, 59, 1);
top: -14px;
border-width: 10px;
}
&.el-popper .popper__arrow {
border-bottom-color: transparent;
}
}