一 问题背景

想要实现：

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

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

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

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