el-table嵌套使用el-date-picker组件时，动态限制每一个el-date-picker的选择范围

转载自：表格中使用el-date-picker以及普通使用el-date-picker(控制不可选的范围)_d_append的博客-CSDN博客一.普通使用1.首先在需要控制时间范围的el-date-picker中绑定属性picker-options以及@chang时间(点击时改变时间范围)注意绑定的picker-options是一个对象二.两个实现的方法注意方法中的date参数是el-picker-time中@change事件的回调参数,这个参数是你选择的时间.格式为yyyy-MM-dd而disabledDate是picker-options的一个函数,作用就是过滤不可选的时间,函数中的参数time是代表el-picker-timhttps://blog.csdn.net/d_append/article/details/107469933

一.普通使用
1.首先在需要控制时间范围的el-date-picker中绑定属性picker-options以及@chang时间(点击时改变时间范围)

注意绑定的picker-options是一个对象

二.两个实现的方法

注意方法中的date参数是el-picker-time中@change事件的回调参数,这个参数是你选择的时间.格式为yyyy-MM-dd

而disabledDate是picker-options的一个函数,作用就是过滤不可选的时间,函数中的参数time是代表el-picker-time的每一个选项时间,disabledDate就是对每一个选项时间进行对比,return为true时就是可选,为false不可选.

注意time.getTime()得到的是时间戳,new Date(date).getTime()就是将date从yyyy-MM-dd的格式转化成时间戳格式,因为两者比较时需要同一种格式.

效果:

二 表格中使用el-date-picker
与正常使用不同的是:他不通过@change来改变选项范围

1.第一步绑定options-picker

2.对表格的每一条数据中的picker-options进行处理

res.data就是列表数据,是一个数组,里面是一个一个的对象.

需要注意的是对表格的picker-options进行处理时,使用@change时会很不好处理.所以这里是在获取表格数据的时候对表格数据的picker-options进行处理