使用el-select插入icon修改样式为自定义选择器

 html：

<el-badge :is-dot="couponList.length > 0 && (couponList.length - 1) != 0">
    <el-select v-model="coupon_id" placeholder="请选择优惠券" 
        class="couponSelect" @change="couponChange">
        <div slot="prefix" class="selectPrice el-input__icon">
            <i class="iconfont icon-youhuiquan-01"></i>
            <span class="selectPrice-price" v-if="couponObj.price">
                -¥{{ couponObj.price }}
            </span>
        </div>
        <el-option v-for="item in couponList" :key="item.id" 
            :label="item.title" :value="item.id">
            <div class="optionPrice">
                <span class="optionPrice-price" v-if="item.price">
                    ¥{{ item.price }}
                </span>
                <span>{{ item.title }}</span>
            </div>
        </el-option>
    </el-select>
</el-badge>

js变量：

data () {
    return {
        // 优惠券id
        coupon_id: 0,
        // 优惠券列表
        couponList: [],
        // 优惠券对象
        couponObj: {
            id: 0,
            price: 0,
            title: "不使用优惠券"
        }
    }
},

js方法：

/**
 * 获取优惠券列表
 */
 async getCouponList() {
    let obj = {
        id: 0,
        price: 0,
        title: "不使用优惠券"
    };
    this.coupon_id = 0;
    this.couponList = [];
    this.couponObj = JSON.parse(JSON.stringify(obj));
    let params = {
        number: this.price
    };
    let res = await coupon.getCouponAllList(params);
    if (res.code == 200) {
        res.data.push(obj);
        this.couponList = res.data;
        this.couponInit();
    };
},
/**
 * 优惠券进来时的回显
 */
couponInit() {
    let couponObjTemp = JSON.parse(window.localStorage.getItem("couponObj"));
    if (couponObjTemp) {
        window.localStorage.removeItem("couponObj");
        if ((couponObjTemp.price - 0) > (this.price - 0)) {
            this.clientWidth > 750 ? this.$message.warning("当前优惠券不可使用") : this.$toast("当前优惠券不可使用");
            Object.keys(this.couponObj).forEach(key => {
                this.couponObj[key] = this.couponList[this.couponList.length - 1][key];
            });
            this.coupon_id = this.couponList[this.couponList.length - 1].id;
        } else {
            Object.keys(this.couponObj).forEach(key => {
                this.couponObj[key] = couponObjTemp[key];
            });
            this.coupon_id = couponObjTemp.id;
        };
    } else {
        Object.keys(this.couponObj).forEach(key => {
            this.couponObj[key] = this.couponList[this.couponList.length - 1][key];
        });
        this.coupon_id = this.couponList[this.couponList.length - 1].id;
    };
},
/**
 * 优惠券切换
 */
couponChange() {
    let obj = this.couponList.find(item => item.id == this.coupon_id);
    if (obj) {
        Object.keys(this.couponObj).forEach(key => {
            this.couponObj[key] = obj[key];
        });
    };
},

css:

/deep/.el-badge, /deep/.couponSelect {
    width: 343px;
    height: 40px;
}

/deep/.el-badge {

    .el-badge__content.is-dot {
        width: 10px;
        height: 10px;
    }
}

/deep/.couponSelect {
    
    .iconfont {
        color: #FF5F59;
    }
    
    .el-input__inner {
        background-color: #F3F8FE;
        border: none;
        font-weight: bold;
    }
    
    .el-input {
        height: 100%;
        order: 2;
        display: flex;
        align-items: center;
        
        .el-input__prefix {
            width: auto;
            position: unset;
            background-color: #F3F8FE;
            
            .el-input__icon {
                width: auto;
                padding-right: 5px;
                font-weight: bold;
                display: flex;
                align-items: center;
                line-height: unset;
                
                .iconfont {
                    width: 20px;
                    height: 20px;
                    font-size: 20px;
                    margin: 0 10px 0 12px;
                    display: flex;
                    align-items: center;
                }
            }
        }
        
        .el-input__inner {
            padding-left: 0;
            flex: 1;
            order: 1;
        }
    }
}
    
.optionPrice {
    display: flex;
    font-weight: bold;
    font-size: 14px;
    
    &-price {
        color: #FF3224;
        margin-right: 5px;
    }
}

.selectPrice {

    &-price {
        color: #FF3224;
    }
}

效果图：