elementui 图片选择器_自定义ElementUI选择器选项样式的方法

要自定义 ElementUI 图片选择器的选项样式，可以使用 scoped slot 和 CSS 样式来实现。

1. 使用 scoped slot 自定义选项内容

在 el-option 标签中使用 scoped slot，可以自定义选项的内容。例如，可以将图片和文字结合起来作为选项的内容。

<el-select v-model="selectedImg" placeholder="请选择图片">
  <el-option v-for="item in imgList" :key="item.id" :label="item.name" :value="item.url">
    <template v-slot:default>
      <div class="option">
        <img :src="item.url" alt="">
        <span>{{item.name}}</span>
      </div>
    </template>
  </el-option>
</el-select>

2. 使用 CSS 样式自定义选项样式

可以通过设置 el-option 的 class 或者使用深度选择器来自定义选项样式。

例如，可以设置选项的背景色和字体颜色：

.el-select-dropdown .el-dropdown-menu .el-dropdown-item.selected {
  background-color: #409EFF;
  color: #FFFFFF;
}

注意：如果使用深度选择器来设置样式，需要在样式前面加上 /deep/ 或者 >>>，例如：

/deep/ .el-select-dropdown .el-dropdown-menu .el-dropdown-item.selected {
  background-color: #409EFF;
  color: #FFFFFF;
}