Vue Element-UI表单按条件动态控制是否必填

写在前面--

  需求是拒绝时必填,同意时备注非必填,

 

正文开始--

  先上效果图--

  

代码部分--

<el-dialog title="返利规则审核" :visible.sync="dialogVisible">                 <el-form ref="form" :rules="rules" :model="form" label-width="80px">                     <el-form-item label="返利审核" prop="status">                         <el-radio-group v-model="form.status">                             <el-radio label="7">通过</el-radio>                             <el-radio label="8">拒绝</el-radio>                         </el-radio-group>                     </el-form-item>      //重点在这,status==2时执行必填,反之就是不必填                     <el-form-item label="备注" prop="verityMsg":rules="form.status == 2? rules.verityMsg : [{ required: false}]">                         <el-input type="textarea" v-model="form.verityMsg"></el-input>                     </el-form-item>                     <el-form-item>                 </el-form>                 <div class="dialog-footer" style="margin-top: 20px;text-align: right;">                     <el-button @click="dialogVisible = false">取 消</el-button>                     <el-button type="primary" @click="submitForm">确 定</el-button>                 </div> </el-dialog>

 

data() {
  return {
      rules: {

        status: [{
            required: true,
            message: '请选择状态',
            trigger: 'blur'
        }, ],
        verityMsg: [{
            required: true,
            message: '请输入备注',
            trigger: 'blur'
        }, ]
    }  }}

 

总结--

  思路就是先写好rules属性和规则,然后在el-form-iem绑定rules属性中进行条件判断

  萌新选手写的第一篇博客,如有不对的地方还请指正,祝大家变得更强

标签：status,Vue,必填,--,rules,动态控制,message,true
来源： https://www.cnblogs.com/xxsy/p/16077052.html