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屬性中進行條件判斷

  萌新選手寫的第一篇博客,如有不對的地方還請指正,祝大家變得更強