vue+elementUi自定义select标签样式、图标、左侧、右侧、插槽、背景图片、大小、select、option、/deep/、::v-deep、position、absolute

1、HTML

<template> <div id="app"> <el-select class="selsect_box" v-model="value" placeholder="请选择" @change="changeSelectOption" >  <template slot="prefix"> <i class="el-icon-ice-drink"> name: "App", data() { return { options: [ { value: "1", label: "黄金糕", }, { value: "2", label: "双皮奶", }, { value: "3", label: "蚵仔煎", }, { value: "4", label: "龙须面", }, { value: "5", label: "北京烤鸭", }, ], value: "", }; }, methods: { changeSelectOption(val) { console.log("val：", val); console.log("this.value：", this.value); }, }, }; 

3、css

.selsect_box { width: 360px; } // 自定义el-input框的一些自定义样式
/deep/ .selsect_box .el-input--small .el-input__inner { background-color: #e6f0ff; padding-left: 40px; height: 50px; border-radius: 5px; color: #1890ff; font-size: 18px; border: 1px solid #1890ff; font-weight: 600; } // 自定义左侧图标插槽样式
::v-deep .selsect_box .el-input__prefix { display: flex; justify-content: center; align-items: center; } // 替换右侧默认图标
/deep/ .selsect_box .el-icon-arrow-up::before { content: ""; background: url(./assets/icon/upperTriangle.png) center center no-repeat; background-size: 37px 37px; display: inline-block; position: absolute; width: 17px; height: 17px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px dotted #1890ff; } // placeholder属性的样式
/deep/ .selsect_box .el-input--small input::-webkit-input-placeholder { font-size: 16px; color: #2881ff; } 

4、相关链接

1、element-ui控件el-select如何在前面添加icon图标 2、Vue ElementUI el-select自定义图标，左右任意自定义加图标