vue2 element组件日期限制分析

1 直接限制到当前日期

`<el-date-picker 
v-model="value2"
align="right" 
type="date" 
placeholder="选择日期" 
:picker-options="pickerOptions"> 
</el-date-picker>


data() { 
 return {
 pickerOptions: {
        disabledDate(time) { return time.getTime() > Date.now(); },
      },
 }
}

2 根据data值限制

`<el-date-picker 
v-model="value2"
align="right" 
type="date" 
placeholder="选择日期" 
:picker-options="pickerOptions"> 
</el-date-picker>

错误写法：
data() { 
 return {
 groupDate:'2023-01-01', 
 pickerOptions: {
        disabledDate(time){
          const min = new Date(this.groupDate)
          
          //this指向的是当前对象pickerOptions，所以this是undefined
          
          return time.getTime() < min.getTime()
        }
      },
 }
}

正确写法
data() { 
 return {
 groupDate:'2023-01-01', 
 pickerOptions: {
        disabledDate: (time) => {
          const min = new Date(this.groupDate)
          
          //使用箭头函数直接获取整个dom的this，所以可以正确获取this
          
          return time.getTime() < min.getTime()
        }
      },
 }
}

变化的点在于 disabledDate: (time) => {
涉及知识点，对象函数的this指向的是当前对象，也就是pickerOptions，使用哦个箭头函数才可获取到。