<el-table-column
label="装完时间"
:render-header="addRedStar"
align="center"
width="250px"
>
<template slot-scope="scope">
<el-date-picker
align="center"
style="width: 202px"
v-model="scope.row.loadTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
:picker-options="startPicker(scope.$index)"
>
</el-date-picker>
</template>
</el-table-column>
<el-table-column
label="卸载时间"
:render-header="addRedStar"
align="center"
width="250px"
>
<template slot-scope="scope">
<el-date-picker
align="center"
style="width: 202px"
v-model="scope.row.unLoadTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
:picker-options="endPicker(scope.$index)"
:default-time="defaultTime"
>
</el-date-picker>
</template>
</el-table-column>
computed: {
startPicker () {
return function(index){
console.log(index)
let startTimestamp = new Date(this.tableData[index].loadTime)
let endTimestamp = new Date(this.tableData[index].unLoadTime)
if(this.tableData[index].unLoadTime) {
return {
disabledDate (time) {
const timestamp = time.getTime()
// 结束时间不小于开始时间
if (timestamp <= endTimestamp) {
return false
} else {
return timestamp > endTimestamp
}
},
selectableRange: (() => {
if(this.$moment(startTimestamp).format('YYYY-MM-DD') == this.$moment(endTimestamp).format('YYYY-MM-DD')) {
let time = this.$moment(endTimestamp).format('HH:mm:ss')
return [`00:00:00 - ${time}`]
} else {
return '00:00:00 - 23:59:59'
}
})(),
}
} else {
return {
disabledDate (time) {
return false
},
selectableRange: (() => {
return '00:00:00 - 23:59:59'
})(),
}
}
}
},
endPicker () {
return function(index){
let startTimestamp = new Date(this.tableData[index].loadTime)
let endTimestamp = new Date(this.tableData[index].unLoadTime)
if(this.tableData[index].loadTime) {
return {
disabledDate:(time) => {
let startTime = this.$moment(startTimestamp).format('HH:mm:ss')
const timestamp = startTime == '00:00:00' ? time.getTime() : time.getTime() + 24 * 1000 * 3600
// 结束时间不大于开始时间
if (timestamp >= startTimestamp) {
return false
} else {
return timestamp < startTimestamp
}
},
selectableRange: (() => {
if(this.$moment(startTimestamp).format('YYYY-MM-DD') == this.$moment(endTimestamp).format('YYYY-MM-DD')) {
let time = this.$moment(startTimestamp).format('HH:mm:ss')
return [`${time} - 23:59:59`]
} else {
return '00:00:00 - 23:59:59'
}
})(),
}
}else {
return {
disabledDate (time) {
return false
},
selectableRange: (() => {
return '00:00:00 - 23:59:59'
})(),
}
}
}
},
defaultTime() {
let time = this.$moment(new Date()).format('HH:mm:ss')
return time;
},
},