展示效果
一、完整代码
<template>
<el-card class="box">
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
status-icon
>
<el-form-item label="Rule Mode">
<el-select
v-model="ruleMode"
placeholder="请选择"
@change="changeRuleMode"
>
<el-option label="校验1" value="1" />
<el-option label="校验2" value="2" />
</el-select>
</el-form-item>
<el-form-item label="Activity name" prop="name" label-width="120px">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="Activity zone" prop="region">
<el-select v-model="ruleForm.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="Activity count" prop="count">
<el-select-v2
v-model="ruleForm.count"
placeholder="Activity count"
:options="options"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">
Create
</el-button>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script lang="ts" setup>
import { cloneDeep } from "lodash";
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
interface RuleForm {
name: string;
region: string;
count: string;
date1: string;
date2: string;
delivery: boolean;
type: string[];
resource: string;
desc: string;
}
const ruleMode = ref("1");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
name: "",
region: "",
count: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: "",
});
let rules = ref<FormRules<RuleForm>>({
name: [
{ required: true, message: "Please input Activity name", trigger: "blur" },
{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
],
region: [
{
required: true,
message: "Please select Activity zone",
trigger: "change",
},
],
count: [
{
required: true,
message: "Please select Activity count",
trigger: "change",
},
],
});
let ruleMode1 = ref<FormRules<RuleForm>>({});
const changeRuleMode = () => {
resetForm(ruleFormRef.value);
if (ruleMode.value == "2") {
ruleMode1.value = cloneDeep(rules.value);
let delAttr = ["region", "count"];
delAttr.forEach((item: any) => {
delete rules.value[item];
});
} else {
rules.value = ruleMode1.value;
}
};
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
console.log("submit!");
} else {
console.log("error submit!", fields);
}
});
};
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
const options = Array.from({ length: 10000 }).map((_, idx) => ({
value: `${idx + 1}`,
label: `${idx + 1}`,
}));
</script>
<style lang="scss" scoped>
.box {
height: 100vh
}
</style>
二、注意事项
- 将表单的验证规则 Rules 定义成 ref,el-form 表单本身提供的 reactive 可能会导致校验失败;
- 切换前需要将原先的 Rules 拷贝一份存起来