关于element-plus中el-select自定义标签及样式的问题

在Element Plus中，自定义el-select的标签样式可以通过CSS来实现。以下是一个简单的例子，展示如何自定义el-select的样式。

首先，确保你已经正确安装并引入了Element Plus。

HTML:

<template>
  <el-select class="custom-select" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

JavaScript:

<script setup>
import { ref } from 'vue'
 
const options = ref([
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
])
</script>

CSS:

<style>
.custom-select .el-input {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  /* 自定义样式 */
  background-color: #f5f7fa;
}
 
.custom-select .el-input .el-select__suffix {
  /* 隐藏原生下拉箭头 */
  display: none;
}
 
.custom-select .el-input .el-input__suffix {
  /* 自定义下拉箭头 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: transparent;
  cursor: pointer;
}
 
.custom-select .el-popper {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-top: 5px;
  /* 自定义样式 */
  background-color: #fff;
}
 
.custom-select .el-select-dropdown__item {
  height: 34px;
  line-height: 34px;
  padding: 0 15px;
  /* 自定义样式 */
  cursor: pointer;
}
 
.custom-select .el-select-dropdown__item.hover {
  background-color: #ecf5ff;
}
 
.custom-select .el-select-dropdown__item.selected {
  font-weight: bold;
  color: #409eff;
}
</style>

在这个例子中，.custom-select 类被用来包裹 el-select 组件，以便我们可以针对它进行CSS样式的自定义。我们隐藏了Element Plus默认的下拉箭头，并添加了自定义的样式。这只是一个简单的例子，你可以根据需要添加更多的自定义样式。