element日期选择范围的运用以及判断当前实时时间是否大于日期选择的时间、开始时间不能大于结束时间

粉毛桃子

已于 2022-11-21 17:33:26 修改

阅读量1.8k

点赞数 2

文章标签： vue.js elementui

于 2022-11-21 17:17:08 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50538763/article/details/127965872

版权

本文介绍了在Vue.js中使用ElementUI日期选择组件时，如何判断当前实时时间是否大于所选日期以及确保开始时间不大于结束时间。通过comparTime方法比较时间，并在提交表单时进行时间校验，确保正确的时间顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

一、element日期选择范围判断当前实时时间是否大于日期选择的时间

需要实现的功能是：如果开始时间小于等于当前时间，那么隐藏编辑按钮
1、如下图当前时间11月21日，开始时间为11月20日小于21日则不显示编辑按钮，开始时间为25日则显示编辑按钮
在这里插入图片描述

解决方法

在这里插入图片描述

1、comparTime(scope.row)
拿到当前这一行的所有数据

 <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                v-show="scope.row.state === 0 && scope.row.sheetOrPlan === 'plan'&& comparTime(scope.row)"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['custom:plan:edit']"
              >编辑
              </el-button>