首页el-select改变小图标

el-select改变小图标

时间: 2025-01-15 16:06:25 浏览: 62

在Element UI的`el-select`组件中，如果你想改变下拉选项列表的小图标，你需要通过自定义渲染来实现。`el-select`本身并不直接提供修改选项小图标的API，但是你可以通过覆盖它的`option-template`属性来自定义每个选项的展示结构。例如，你可以创建一个包含`icon`字段的选项数据，并在模板中使用这个字段： ```html <template> <el-select v-model="selectedValue" option-template="\ <el-option :label='item.label' :value='item.value' :key='item.value' slot="custom" > <i class='your-custom-icon-class' :class="{'active': item.isActive}" ></i>  {{ item.label }} </el-option>\ "> </template> <script> export default { data() { return { selectedValue: '', options: [ { value: 'Option 1', label: 'Option 1', isActive: false, icon: 'your-icon-class-1' }, { value: 'Option 2', label: 'Option 2', isActive: true, icon: 'your-icon-class-2' }, ] } } } </script> ``` 在这里，`your-custom-icon-class` 和 `your-icon-class-1`、`your-icon-class-2` 需要替换成实际的CSS类名，对应你想显示的图标样式。然后，`isActive`字段可以根据需要控制图标的显示状态。

阅读全文