2022-04-26
阅读:1047
在做vue项目中,使用element-ui 组件库中的select
组件时,想自定义一下下拉框里选项的样式,可以按如下操作
将自定义的HTM模板插入
el-option
的slot中即可
!
参考官方文档代码如下:
可以在插入的HTML结构中设置class
修改选项样式
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}],
value: ''
}
}
}
</script>