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==8时执行必填,反之就是不必填

                    <el-form-item label="备注" prop="verityMsg":rules="form.status == 8? 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属性中进行条件判断

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