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

要自定义ElementUI选择器选项的样式，可以使用 ElementUI 提供的 scoped slot 来实现。以下是实现自定义图片选择器选项样式的示例代码：

<el-image v-for="(item, index) in options" :key="index" :src="item.src" :preview-src-list="previewList" style="width: 100px; height: 100px;">
  <template #placeholder>
    <div class="custom-option">
      <img :src="item.src">
      <span>{{item.label}}</span>
    </div>
  </template>
</el-image>

在上述代码中，我们将 `el-image` 组件作为图片选择器的选项，使用 `v-for` 遍历 `options` 数组渲染每个选项。通过 `preview-src-list` 属性设置预览图片列表，`style` 属性设置选项的样式。

关键在于我们使用了 scoped slot 来自定义选项的内容，即 `#placeholder` 模板。在模板中，我们使用了一个自定义类名 `custom-option` 来设置选项的样式。你可以自己定义这个类名，并在样式表中编写相应的样式来实现选项的自定义样式。

需要注意的是，使用 scoped slot 实现自定义选项样式时，需要使用 `v-for` 渲染每个选项，并为每个选项设置一个唯一的 `key` 属性，以保证选项的正确渲染和更新。