element表单验证问题

Question

<el-row>

                <el-col :span="12">
                    <el-form-item label="国籍" prop="nationality">
                        <el-radio-group v-model="ruleForm.nationality">
                            <el-radio label="1">中国</el-radio>
                            <el-radio label="2">其它</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="date1" label="其它" v-if="ruleForm.nationality==2">
                        <el-input v-model="ruleForm.nationalityOther"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

当选择其它选项的时候，后面的输入框是必填
"nationality": [{ "required": true }, {

                "validator": function (rule, value, callback) {
               
                }
            }]
            请问这个该怎么写呢？只能包装到一个对象里面吗？

Answer 1

依赖ruleForm.nationality值，正好可以扔计算属性里去。

<el-form-item :rules="nationalityRule">


computed: {
  isOtherNationality() {
    return this.ruleForm.nationality === '2';
  },
  nationalityRule() {
    return [
      { required: isOtherNationality },
      {
        validator: function(rule, value, callback) {},
      },
    ];
  },
}