element的表单二级字段校验

element的表单二级字段校验

很多后台管理系统项目基本都用到vue+element组件校验，但是有时候有一些特殊的情况，类似选中某个指定的字段之后才会显示更多的字段，并且有些字段必填，这个时候的校验方式其实也比较简单。

例如这里在选择是的时候字段较少，但是当选择否的时候多出一些其他的字段校验。

上代码

// An highlighted block
var foo = 'bar';
 <el-form-item label="开始时间" prop="videoLive.videoStartTime">
                                <el-date-picker
                                    :picker-options="expireTimeOption"
                                    v-model="ruleForm.videoLive.videoStartTime"
                                    type="datetime"
                                    placeholder="选择开始时间">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="视频码" prop="videoLive.videoCode">
                                <el-input v-model="ruleForm.videoLive.videoCode" placeholder="请输入视频码"></el-input>
                            </el-form-item>

其实只要prop这里和data return 的字段保持统一就OK。

// An highlighted block
 ruleForm: {
                videoLive: {
                  videoCode:'',                    							videoStartTime:'' //视频开始时间
                }


            },

 rules: {
             
     'videoLive.videoCode': [
        { required: true, message: '请输入视频码', trigger: 'blur'}],
               

校验里面这样写就OK。

2021.3.17.
CC的第一篇博客，写的不好的地方和不熟悉的地方请多多指教。