<el-date-picker
v-model="form.time1"
:picker-options="pickerStart"
type="date"
format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
<el-date-picker
v-model="form.time2"
:picker-options="pickerEnd"
type="date"
format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
<el-table :data="form.tableData" style="width: 100%">
<el-table-column prop="startTime" label="开始时间" width="180">
<template slot-scope="{row,$index}">
<el-form-item
:prop="'form.tableData[' + $index + '].startTime'"
:rules="[{required:true,message: '请选择开始时间',trigger:'blur'}]"
>
<el-date-picker
v-model="row.startTime"
:picker-options="row.startTimePic"
type="date"
format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="endTime" label="完成时间" width="180">
<template slot-scope="{row,$index}">
<el-form-item
:prop="'form.tableData[' + $index + '].endTime'"
:rules="[{required:true,message: '请选择完成时间',trigger:'blur'}]"
>
<el-date-picker
v-model="row.endTime"
:picker-options="row.endTimePic"
type="date"
format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
</el-table>
```javascript
data(){
return {
form:{
time1:'',
time2:'',
tableData:[],
},
pickerStart:{
disabledDate: (time) => {
return this.pickDateStart(time)
}
},
pickerEnd:{
disabledDate: (time) => {
return this.pickDateEnd(time)
}
}
}
},
methods:{
pickDateStart(time){
if(this.form.time2){
return time.getTime() > this.form.time2
}else{
return false
}
},
pickDateEnd(time){
if(this.form.time1){
return time.getTime() < this.form.time1
}else{
return false
}
},
},
watch:{
//数组
'form.tableData':{
handler(list){
list.forEach(item=>{
item.endTimePic = {
disabledDate(time) {
if(item.startTime){
return time.getTime() < item.startTime
}
}
}
item.startTimePic = {
disabledDate(time) {
if(item.endTime){
return time.getTime() > item.endTime
}
}
}
})
},
deep:true
}
}