当前位置：首页 > news >正文

Element UI、Element Plus 里的表单验证的required必填的属性不能动态响应？

news 来源：原创 2025/4/23 9:32:45

一问题背景

想要实现：

新增/修改对话框中(同一个)，修改时“备注”字段非必填，新增时"备注"字段必填

结果发现直接写不生效-初始化一次性

edit: [{ required: true, message: "请输入备注", trigger: "blur" }],

写成validator虽然生效但是必填时没有*-动态但没required配置项匹配的样式

validator: (rule, value, callback) => {
if (dialogType.value === 'edit' && !value?.trim()) {
callback(new Error('请输入备注'));
} else {
callback();
}
},
trigger: 'blur'

  remark: [{validator: (rule: any, // Element Plus 内部规则对象，通常无需具体类型value: string, // 输入框的值（根据字段名 remark 推断为字符串）callback: (error?: Error) => void // Element Plus 验证回调函数) => {if (dialogType.value === "edit" && !value?.trim()) {callback(new Error("请输入备注"));} else {callback();}},trigger: "blur",},],

二解决方法

（一）prop写成判断对应不同rules规则，对号入座

        <el-form-itemlabel="备注":prop="dialogType === 'edit'? 'remark' : ''"><el-input v-model="form.remark" /></el-form-item>

const dialogType = ref<"add" | "edit">("add");
const rules = {remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
}

（二）把rules挪到el-form-item内部

        <el-form-itemlabel="备注"prop="remark":rules="{required: dialogType === 'edit' ? true : false,message: '请输入备注',}"><el-input v-model="form.remark" /></el-form-item>

感觉实现的都挺简洁的，比起监听什么的实现方式