使用 el-option-group 对选项进行分组，其 label 属性代表分组名称。

最新推荐文章于 2024-05-09 22:13:34 发布

爱吃番茄的图图

最新推荐文章于 2024-05-09 22:13:34 发布

阅读量942

点赞数

文章标签：前端 vue.js typescript

本文链接：https://blog.csdn.net/XMCYD/article/details/132889598

版权

分组显示选项实例：

<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)
}

效果：
在这里插入图片描述