在Vue官方文档中介绍到使用v-bind对Class与Style进行绑定（查阅Vue文档
<FormItem label="事务类型" prop="city">
<Select v-model="transactionType" placeholder="请选择事务的类型">
<Option
v-for="item in transactionTypes"
:value="item.value"
:key="item.value"
v-bind:style="{ backgroundColor:item.value }"
>
{{ item.label }}</Option>
</Select>
</FormItem>
.....
data() {
return {
transactionTypes: [
{ value: "blue", label: "不重要" },
{ value: "yellow", label: "一般重要" },
{ value: "orange", label: "比较重要" },
{ value: "red", label: "特别重要" }
]
}
}
效果
然后参考iviewUI的文档进行美观一下（查阅iviewUI下拉列表文档
<FormItem label="事务类型" prop="city">
<Select v-model="transactionType" placeholder="请选择事务的类型">
<Option v-for="item in transactionTypes" :value="item.value" :key="item.value">
<span>{{ item.label }}</span>
<span style="float:right">
<Icon type="ios-water" :color="item.value" />
</span>
</Option>
</Select>
</FormItem>
......
data() {
return {
transactionTypes: [
{ value: "#2db7f5", label: "不重要" },
{ value: "#19be6b", label: "一般重要" },
{ value: "#ff9900", label: "比较重要" },
{ value: "#ed4014", label: "特别重要" }
]
}
}
美观后
