美文网首页
vue中element下拉多选框验证

vue中element下拉多选框验证

作者: 顺小星 | 来源:发表于2021-02-27 16:00 被阅读0次

    一、html中

    代码如下:

    <!-- start 测试 -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动区域" prop="region">
                    <el-select multiple v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
    </el-form>
            <!-- end  测试 -->
    

    注意点如下:

    image.png

    二、data中

    代码如下:

    // start 测试
                    ruleForm: {
                        region: [],
                    },
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }],
                    rules: {
                        region: [{
                            required: true,
                            message: '请选择活动区域',
                            trigger: 'change',
                            type:'array'
                        }],
                    },
    //end 测试
    

    注意点如下:

    image.png

    现在是2021.2.27下午四点整,昨日基金亏了44。

    相关文章

      网友评论

          本文标题:vue中element下拉多选框验证

          本文链接:https://www.haomeiwen.com/subject/lcutzktx.html