web前端之vue2+element-ui自定义select标签样式、背景图片、左右侧、图标、插槽、大小、position、absolute、select、option、deep

---

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"></i>
      </template>

      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

---

JavaScript

export default {
  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);
    },
  },
};

---

style

.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;
}

---

相关链接

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