Element-ui时间联动组件优化

        最近项目在使用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 {
              return time.getTime() > Date.now() - 8.64e7
            }
          }
        },
        pickerOptions1: {
          disabledDate (time) {
            if (this.startTime) {
              return time.getTime() < this.startTime.getTime()
            } else {
              return time.getTime() < Date.now() - 8.64e7
            }
          }
        },

    当然前提是你在data里边已经定义好了startTime与endTime并于开始和结束时间框进行了数据绑定。当结束时间没有选择时，endTime为null，这时候与当前时间进行比较。反之亦然。

    最关键的地方，当开始或者结束时间框选中值之后，另外的一个选择框会执行disabledDate。以结束时间为例，发现取不到this.startTime,程序报错，this.startTime is undefined.

    确定data里边定义了startTime,那么唯一能出问题的地方，就是this。因为这里的disabledDate是匿名函数，因此，它没有直接的宿主对象，那么函数里边的this，指的是window。严格模式下，是undefined。那么对于这个问题，解决办法有很多，这里举出三种。

    1. 改为箭头函数。箭头函数里边的this，指向它所在对象的宿主。那么在这里，“它所在对象”，也就是pickerOptions1，那么里边的this，就指的是最外层的data，从而顺利取到this.startTime。

    2.外部定义变量保存startTime所在的对象。即let that = this，那么在里边就应该取that.startTime。

    3.bind，修改this指向。在disabledDate函数后边加上  .bind(this)，此时就将匿名函数内部的this改为pickerOptions1的宿主对象，即最外层的data,从而顺利取到startTime。

正确代码：

扫描二维码关注公众号，回复： 881811 查看本文章

pickerOptions0: {
          disabledDate: (time) => {
            if (this.endTime) {
              return time.getTime() > this.endTime.getTime()
            } else {
              return time.getTime() > Date.now() - 8.64e7
            }
          }
        },
        pickerOptions1: {
          disabledDate: (time) => {
            if (this.startTime) {
              return time.getTime() < this.startTime.getTime()
            } else {
              return time.getTime() < Date.now() - 8.64e7
            }
          }
        },