前言
最近因为工作需要又得整个选择日期的组件。。需求大概为根据接口返回数组渲染出数组长度数量的DatePicker。（假设有三个，暂且简称为A、B、C）
然后，在一个DatePicker完成时间选择后，禁止之后的DatePicker选择之前所选日期之前的日期（绕）。
假设Picker A选择日期为3月22日，后面的Picke B和C就只能从3月22日开始选，如果此时Picke B选择了3月25日，那么Picke C就只能从3月25日开始选，大概是这么个情况。
实现功能
假设传回的数组包含四项。
先放预览：
然后是代码：
<template>
<div class="wrapper">
<el-date-picker
v-for="(item, index) in demoArr"
:key="index"
v-model="item.value"
type="date"
:picker-options="item.pickerOptions"
@change="setTime(index)"
>
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
demoArr: [
{ index: 1, value: "" },
{ index: 2, value: "" },
{ index: 3, value: "" },
{ index: 4, value: "" },
],
};
},
methods: {
setTime(i) {
let _this = this;
_this.demoArr[i].value.getTime();
if (i < this.demoArr.length - 1) {
_this.demoArr[i + 1].pickerOptions = {
disabledDate(time) {
return time.getTime() < new Date(_this.demoArr[i].value).getTime();
},
};
}
},
},
mounted() {
let vm = this
for (let i = 0; i <= vm.demoArr.length - 1; i++) {
vm.$set(vm.demoArr[i],'pickerOptions',{})
}
},
};
</script>
首先使用v-for渲染出四个DatePicker，没什么能说的这里就不阐述了。
查阅elementUI文档得知，可以通过设置pickerOption中disabledDate的内容来设置选择日期的禁用状态，disabledDate是一个函数,该函数的参数为当前日期，返回值为Boolean。
所以我的大概思路就是：在标签中使用动态pickerOptions属性（:pickerOptions）,然后给数组中的每一项都添加一个pickerOptions对象，用来容纳disabledDate以控制禁用状态。
然后，在选择某一个DatePicker的change时间触发后调用setTime方法，该方法会给当前点击DatePicker的下一个DatePicker中pickerOption赋值，就可以简单地实现需求。
不过这里这里遇到了一个问题：
首先在我的印象中，给一个对象中一个不存在的属性赋值，就能做到给对象添加一个新属性。
但当我在初始数组里添加pickerOption时功能正常但通过遍历给数组每一项都添加一个pickerOptions之后却失效了 :(
琢磨了一阵，发现通过直接赋值添加的新对象pickerOptions中没有setter和getter，也就无法实现页面内容的响应。。。要使用$set方法添加pickerOptions才能实现一开始就写好那样的效果（胡乱表达）。
待优化的问题
因缺乏测试，可能还有很多潜在的问题没被我发现，目前能想到的有一点，比如：
如果用户就是不按照顺序点、或者要从中间开始点击怎么办？
在change事件触发时，先把后面所有DatePicker的值清空后再全部添加pickerOptions也许能一定程度上解决用户不按照顺序点击的问题。
本人也才入门不久、尚才疏学浅，不足之处还请斧正。
