表格中使用el-date-picker以及普通使用el-date-picker(控制不可选的范围)

一.普通使用

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

表格中使用el-date-picker以及普通使用el-date-picker(控制不可选的范围)_第1张图片
注意绑定的picker-options是一个对象
表格中使用el-date-picker以及普通使用el-date-picker(控制不可选的范围)_第2张图片
二.两个实现的方法

表格中使用el-date-picker以及普通使用el-date-picker(控制不可选的范围)_第3张图片
注意方法中的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以及普通使用el-date-picker(控制不可选的范围)_第4张图片
表格中使用el-date-picker以及普通使用el-date-picker(控制不可选的范围)_第5张图片
二 表格中使用el-date-picker
与正常使用不同的是:他不通过@change来改变选项范围

1.第一步绑定options-picker
表格中使用el-date-picker以及普通使用el-date-picker(控制不可选的范围)_第6张图片
2.对表格的每一条数据中的picker-options进行处理

表格中使用el-date-picker以及普通使用el-date-picker(控制不可选的范围)_第7张图片
res.data就是列表数据,是一个数组,里面是一个一个的对象.

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

你可能感兴趣的:(表格中使用el-date-picker以及普通使用el-date-picker(控制不可选的范围))