Element-ui时间联动组件优化

最新推荐文章于 2025-09-18 09:39:50 发布

原创

最新推荐文章于 2025-09-18 09:39:50 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Element-ui #vue #时间联动组件 #tihs

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

最近项目在使用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