<el-form
ref="form"
:model="form"
size="medium"
label-width="120px"
:rules="rules"
>
<el-form-item label="业务起止日期" prop="selectDate">
<el-date-picker
v-model="form.selectDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="cyan"
icon="el-icon-search"
@click="handleQuery('form')"
>搜索</el-button
>
<el-button icon="el-icon-refresh" @click="resetForm('form')"
>重置</el-button
>
</el-form-item>
</el-form>
export default {
name: "AccountFlow",
components: {
},
data() {
return {
form: {
selectDate: "",
},
rules: {
selectDate: [
{
required: true, message: '请选择日期', trigger: "change" },
],
},
}
}
methods:{
handleQuery(formName) {
// console.log(this.currentPage);
this.$refs[formName].validate((valid) => {
console.log(valid);
if (valid) {
console.log(this.form);
} else {
console.log("error submit!!");
console.log(this.form);
return false;
}
});
},
/** 重置按钮操作 */
resetForm(formName) {
this.$refs[formName].resetFields();
},
}
}
最初のクエリでは、検証ルールがインターセプトする可能性がありますが、これは正常です。リセットした後、クエリを再度クリックすると、検証ルールは無効になります。この時点では、コンソールに出力される有効な値は true のままです。！！何？リセットしたらfalseになるんじゃないでしょうか？
ネットワーク全体の情報を確認したところ、基本的にプロップ内のフィールドとデータ内のフォームオブジェクト内のフィールドは同じであると書かれていました。パニックにならないでください。リセットの前後で selectDate を慎重に出力しました。リセット前は selectDate が空の文字列であったことがわかりました。選択後は長さ 2 の配列になりました。図に示すように、後はリセットしました。selectDate が変更されました
。！！！有罪となる証拠は次のとおりです。
要素の検証がまだ少し不完全なようです。困ったときは自分で調べてください
data() {
var validateDate = (rule, value, callback) => {
if (value === "") {
callback(new Error("请选择时间范围"));
} else if(value.length == 1 && !value[0]){
callback(new Error("请选择正确的时间范围"));
}else{
callback();
}
};
return {
form: {
selectDate: "",
},
rules: {
selectDate: [
{
validator: validateDate, trigger: "change" },
],
},
}
}
カスタム検証については皆さんご存知かと思いますが、あまり詳しく説明しないで、コードを見てみましょう。最終的な分析では、リセット後、selectDate のデータがエスケープされ、コントロールから完全にエスケープされたため、カスタム検証が必要です。