分组显示选项实例:
<el-form-item label="营销活动:" labelWidth="110">
<el-select v-model="formData.promotionId" clearable>
<el-option-group v-for="group in options" :key="group.type" :label="group.type">
<el-option v-for="item in group.options" :key="item.id"
:label="`${item.promotionName}($${(item.price / 100).toFixed(2)})`" :value="item.id">
</el-option>
</el-option-group>
</el-select>
</el-form-item>
const state = reactive({
options: [
{
type: '首月促销活动',
options: [
]
},
{
type: '免费体验',
options: [
]
}
],
})
function loadData() {
//拿到营销活动列表
listMarketPages().then(({ data }) => {
// 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
state.options[0].options = data.filter(item => item.type == 1)
state.options[1].options = data.filter(item => item.type == 0)
}
效果: