1.实现效果
动态校验.gif
2.实现原理
- iview组件库Form表单， ref="formValidate"，:model="formInline"，:rules="ruleValidate"。
- 选择审核结果的时候动态的设置备注的规则，当为通过为非必填，反之为必填。
- 为备注项设置相应的动态rule：
:rules="formInline.status == '2'? ruleValidate.remark: [{ required: false }]"
3.实现代码
<template>
<div class="content">
<Card>
<p slot="title">表单动态校验</p>
<Form
:label-width="100"
ref="formValidate"
:model="formInline"
:rules="ruleValidate"
>
<FormItem label="审核结果：" prop="status">
<Select
v-model="formInline.status"
placeholder="请选择审核结果"
>
<Option value="1">审核通过</Option>
<Option value="2">审核驳回</Option>
</Select>
</FormItem>
<FormItem
label="备注："
prop="remark"
:rules="
formInline.status == '2'
? ruleValidate.remark
: [{ required: false }]
"
>
<Input v-model="formInline.remark" type="textarea"></Input>
</FormItem>
<div style="text-align: right; padding: 20px 0">
<Button size="large" type="default" @click="cancelAction" class="mr10"
>取消</Button
>
<Button size="large" type="primary" @click="addAction">确认</Button>
</div>
</Form>
</Card>
</div>
</template>
<script>
export default {
data() {
return {
formInline: {
remark: "",
status: "",
},
ruleValidate: {
status: [
{ required: true, message: "审核结果不能为空", trigger: "change" },
],
remark: [
{ required: true, message: "请填写不通过原因", trigger: "blur" },
],
},
};
},
methods: {
addAction() {
let data = { ...this.formInline };
console.log(data);
this.$refs.formValidate.validate((valid) => {
if (valid) {
this.$Message.success("操作成功");
this.cancelAction();
}
});
},
cancelAction() {
Object.keys(this.formInline).forEach((key) => {
this.formInline[key] = "";
});
this.$refs["formValidate"].resetFields();
},
},
};
</script>
