最近在项目中使用antd组件库,使用多选日期选择器选择开始时间与结束时间的时候发现组件库中的默认value是[moment(startTime,'xxxxx'),moment(endTime,'xxxxx')]格式,而后台要求的是2个字段分别保存开始结束时间,解决方案:
//新增组件WDbtime.vue
<template>
<a-range-picker show-time style="width: 100%" v-model="dbTime" :format="dateFormat" @change="selectTime" />
</template>
<script>
import moment from 'moment'
export default {
name: 'WDbTime',
props:{
dateFormat:{
type: String,
default: 'YYYY-MM-DD HH:mm:ss',
},
startTimeKey:{//开始时间key
type: String,
default: 'startTime',
},
endTimeKey:{//结束时间key
type: String,
default: 'endTime',
},
formObj:{//开始时间与结束时间的父对象
type: Object,
default: ()=>{},
required: true,
},
},
data(){
return{
dbTime:[]
}
},
watch:{
formObj:{
handler:function(val,oldVal) {
if(val[this.startTimeKey]!=oldVal[this.startTimeKey] || val[this.endTimeKey]!=oldVal[this.endTimeKey]){
this.init()
}
},
deep:true,
}
},
mounted() {
this.init()
},
methods:{
init(){
let $formObj = JSON.parse(JSON.stringify(this.formObj))
if($formObj[this.startTimeKey]){
this.dbTime = [
moment($formObj[this.startTimeKey], this.dateFormat),
moment($formObj[this.endTimeKey], this.dateFormat)
]
}else{
this.dbTime = []
}
},
selectTime(v,t){
let $formObj = JSON.parse(JSON.stringify(this.formObj))
$formObj[this.startTimeKey] = t[0]
$formObj[this.endTimeKey] = t[1]
this.$emit('update:updTime',$formObj)
}
}
}
</script>
//使用页面
<WDbtime :formObj="template" :updTime.sync="template"></WDbtime>