之前以为使用 disabledDate 限定日期就够了，后面说需要限制在此刻之前更严谨。这里就需要更改selectableRange的值。

刚开始想使用事件监听的方式，比如 change、focus 事件，但是发现不能，这里的事件是针对输入框的，而不是弹出来的 date-picker里面的输入选择框。所以使用监听他的值。

当我们日期每次变动的时候都需要去验证是否是当前日期，然后才看是否修改selectableRange的值

template 部分

<el-date-picker
  placeholder="选择日期时间"
  type="datetime"
  value-format="yyyy-MM-dd HH:mm:ss"
  :picker-options="options"
  v-model="ruleForm.time"
  style="width:100%"></el-date-picker>

script 部分

{
  data() {
    return {
      ruleForm: {
        time: ''
      },
      options: {
        // 时间不能大于当前时间
        disabledDate: time => {
          return time.getTime() > Date.now()
        },
        selectableRange: '00:00:00 - 23:59:59'
      }
    }
  },
  watch: {
    'ruleForm.time'(selectTime) {
      const date = new Date(new Date(selectTime).setHours(0, 0, 0, 0)).getTime()
      const today = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
      const curTime = new Date()
      if (date >= today) {
        // 当选择的日期就是当天的时候，这个时候就要限制时间应当小于此时此刻的时分秒
        this.options.selectableRange = `'00:00:00 - ${String(curTime.getHours()).padStart(2, '0')}:
        ${String(curTime.getMinutes()).padStart(2, '0')}:${String(curTime.getSeconds()).padStart(2, '0')}`
      } else {
        // 当选择的日期小于当天的时候，这时需要把时分秒的限制放开，否则不能选择
        this.options.selectableRange = '00:00:00 - 23:59:59'
      }
    }
  }
}