美文网首页
2020-04-01 elementui 起始日期、结束日期 自

2020-04-01 elementui 起始日期、结束日期 自

作者: 追寻1989 | 来源:发表于2020-04-01 18:19 被阅读0次

我创建的在线示例:( ^∀^)戳这里
<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" }
        ]
      }
    };
  },

相关文章

网友评论

      本文标题:2020-04-01 elementui 起始日期、结束日期 自

      本文链接:https://www.haomeiwen.com/subject/ltnauhtx.html