el-form动态检验rules
需求:某个字段的下拉框根据选择的值,动态控制必填项是否必填
1、js中控制
<el-form ref="form" :rules="rules" :model="form" :show-message="false" style="padding: 0px" label-width="160px">
<el-row class="row-change-label">
<el-col :span="12" :xs="24" >
<el-form-item label="xx" prop="xxx" class="ast-class input-dialog">
<el-input v-model="form.xxx" readonly placeholder="点击选择" />
</el-form-item>
</el-col>
<el-col :span="12" :xs="24" >
<el-form-item label="xxx" prop="xx" class="item-disabled">
<el-select v-model="form.xxx" placeholder="" @change="changeType" >
<el-option v-for="dict in selectDatas.applyType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" :xs="24" v-if="applyType == '1'" class="remove-borderBtm">
<el-form-item label="xxx" prop="rentType">
<el-select v-model="form.xxx" placeholder="请选择xxx" clearable>
<el-option v-for="dict in selectDatas.rentType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
rules: {
xxx: [
{
required: true,
message: '请选择',
trigger: 'change',
},
],
xxx: [
{
required: true,
message: '请选择',
trigger: 'blur',
},
],
xxx: [
{
required: true,
message: '请输入',
trigger: 'blur',
},
],
},
changeType(value){
if (value == 1) {
for (let key in this.rules) {
this.rules[key][0].required = false
}
} else {
for (let key in this.rules) {
this.rules[key][0].required = true
}
}
}
更新~
2、在模板区动态控制必填项是否必填
<el-form-item
class="input-dialog"
:prop="'tableData.' + rowIndex + '.xxx'"
:key="'tableData.' + rowIndex + '.xxx'"
:rules="
row.yyy
? (rules.xxx= [{ required: true, message: '不能为空', trigger: 'blur' }])
: (rules.xxx= [])
"
>
<EditRemarkInput
v-model="row.xxx"
></EditRemarkInput>
</el-form-item>