美文网首页
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