In vue projects, dynamic rules verification of element-ui forms may sometimes be used, such as which option is selected, and then dynamically displayed or disabled, etc.
We can cleverly use the verification rules of form-item in the element-ui form to handle it (each form-item can be verified independently).
Above code:
<el-form-item
label="3、属于以下何种优先配售类型(单选,符合以下条件之一即属于优先配售范围)"
prop="yxpslx"
:rules="sqyxForm.jtpslx == '0' ? { required: true, message: '请选择', trigger: 'change'} : {}"
label-width="600px"
style="display:flex; flex-direction: column;"
class="elformitem3"
>
<el-radio-group v-model="sqyxForm.yxpslx" :disabled="sqyxForm.jtpslx ==1" @change="changeYxpsRadio">
<el-radio label="0" class="mb10" :disabled="sqyxForm.jtsgry == '0' && sqyxForm.jtpslx == '0'">A.夫妻双方均符合共有产权住房申购条件且共同申购</el-radio
><br />
<el-radio label="1" class="mb10" :disabled="sqyxForm.jtsgry == 1">B.港澳青年</el-radio>
<br />
<el-radio label="2" class="mb10" :disabled="sqyxForm.jtsgry == 1">C.二孩以上家庭</el-radio>
<br />
<el-radio label="3" :disabled="sqyxForm.jtsgry == 1">D.经区政府批准的优先保障对象</el-radio>
</el-radio-group>
</el-form-item>
The key point is this: :rules="sqyxForm.jtpslx == '0' ? { required: true, message: 'Please select', trigger: 'change'} : {}" sqyxForm.jtpslx == '0' This is
me The above options can be dynamically displayed or disabled. When disabled, there will be no verification! ! !