Element-ui时间联动组件优化

最新推荐文章于 2025-05-30 09:06:22 发布

for_weber

最新推荐文章于 2025-05-30 09:06:22 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue相关文章标签： Element-ui vue 时间联动组件 tihs

本文链接：https://blog.youkuaiyun.com/for_weber/article/details/78217900

在Vue项目中使用Element-ui组件时，遇到了时间联动选择器的需求。原生组件不能完全满足，于是进行了定制。主要问题是：在选择开始或结束时间后，另一个选择框的disabledDate函数无法获取到this.startTime。解决方案包括使用箭头函数、外部定义变量或bind方法改变this指向，以确保能正确访问到startTime。

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

最近项目在使用vue框架+Element-ui组件开发。有一个表单需要实现一个联动的时间选择器。Element-ui上已经有例子，但是发现与需求不是很符合，因此稍作改动，实现开始时间与结束时间的智能联动。

startTime: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
     endTime: {

          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },

    这两个函数是控制时间选择器的关键函数。Element-ui文档例子中是与当前时间进行比较，因此我们需要改变比较条件。
pickerOptions0: {
          disabledDate (time) {
            if (this.endTime) {
              return time.getTime() > this.endTime.getTime()
            } else {
              retu