我创建的在线示例:( ^∀^)戳这里
<template>
<el-form
ref="formAdd"
:model="formAdd"
:rules="formAddRule"
>
<el-form-item label="开始年月" prop="begnYm">
<el-date-picker
v-model="formAdd.begnYm"
type="month"
placeholder="选择年月"
value-format="yyyyMM"
/>
</el-form-item>
<el-form-item label="结束年月" prop="endYm">
<el-date-picker
v-model="formAdd.endYm"
type="month"
placeholder="选择年月"
value-format="yyyyMM"
/>
</el-form-item>
</el-form>
</template>
data() {
var checkBegnYm = (rule, value, callback) => {
if (
value !== "" &&
this.formAdd.endYm != "" &&
Number(value) > Number(this.formAdd.endYm)
) {
callback(new Error("起始年月不能大于结束年月!"));
} else {
if (this.formAdd.endYm !== "") {
this.$refs.formAdd.validateField("endYm");
}
callback();
}
};
var checkEndYm = (rule, value, callback) => {
if (value !== "" && Number(value) < Number(this.formAdd.begnYm)) {
callback(new Error("结束年月不能小于起始年月!"));
} else {
callback();
}
};
return {
// 提交的数据
formAdd: {
begnYm: "",
endYm: "",
},
// 表单规则
formAddRule: {
begnYm: [
{ required: true, message: "请选择开始年月", trigger: "change" },
{ validator: checkBegnYm, trigger: "change" }
],
endYm: [
{ required: true, message: "请选择结束年月", trigger: "change" },
{ validator: checkEndYm, trigger: "change" }
]
}
};
},
网友评论