?一 問題背景

想要實現：

新增/修改對話框中(同一個)，修改時“備注”字段非必填，新增時"備注"字段必填

結果發現直接寫不生效-初始化一次性

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>

感覺實現的都挺簡潔的，比起監聽什么的實現方式