实习总结第三谈-------时间选择器插件传参格式与后台不符的解决方法

我正在写的当前项目中涉及到了element中的DataPicker日期选择器，在传参的时候时间格式与后台格式有差异，插件中没有提供毫秒，value-format只能写到yyyy-MM-dd HH:mm:ss,但后台的格式必须有毫秒，故此借用了中间变量在初始化函数中把绑定的起止时间进行了格式化：

1.DataPicker日期选择器的代码：两种写法

第一种起止时间分开：

 <el-form-item label="操作时间(起):" :label-width="formLabelWidth">

<el-col :span="22">

<el-date-picker type="date" v-model="sizeForm.startczsjtimeStr" value-format='yyyy-MM-dd' style="width: 100%;" placeholder="选择日期"></el-date-picker>

</el-col>

</el-form-item>

<el-form-item label="操作时间(止):" :label-width="formLabelWidth">

<el-col :span="23">

<el-date-picker type="date" v-model="sizeForm.endczsjtimeStr" value-format='yyyy-MM-dd' placeholder="选择日期" style="width: 100%;"></el-date-picker>

</el-col>

</el-form-item> 

第二种：起止时间联动：

<el-col :span="14">

<el-form-item label='时间范围' :label-width="formLabelWidth">

<el-date-picker v-model="sizeForm.datePickerValue" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width:350px">

</el-date-picker>

</el-form-item>

</el-col>

起止时间时间联动效果图：

 

我用的是第二中联动形式的。

2,在初始化函数中进行起止时间的格式规定：

// 初始化企业信息表格数据，将页码，及每页显示的条数以参数传递提交给后台 , startczsjtimeStr: this.sizeForm.startczsjtimeStr, endczsjtimeStr: this.sizeForm.endczsjtimeStr

getData () {

let starDate = ''

let endDate = ''

// 判断表单里的时间插件绑定的数据datePickerValue存在与否；当它不存在的时候，长度为0，自然也没有第0个第1个值；

if (this.sizeForm.datePickerValue) {

starDate = this.sizeForm.datePickerValue[0] + ' 00:00:00.000'

endDate = this.sizeForm.datePickerValue[1] + ' 23:59:59.999'

}

// 拉取数据

this.$axios

.post(this.$api.company, this.$qs.stringify({ pageSize: this.pageSize, pageNum: this.pageNum, companyname: this.sizeForm.companyname, companynature: this.sizeForm.companynature, companyindustry: this.sizeForm.companyindustry, companyscale: this.sizeForm.companyscale, jd: this.sizeForm.jd, startczsjtimeStr: starDate, endczsjtimeStr: endDate }))

.then(res => {

this.total = Number(res.data.total)

this.companyData = res.data.list

// console.log(this.companyData)

})

.catch(error => {

console.log(error)

})

},

主要是如下图中红框中的部分

判断是否存在datapicker的起止时间回值

判断是否存在datapicker的起止时间回值主要是为了防止没有选择起止时间查询数据时，报错datapicker[0]和datapicker[1]不存在或者为空，导致不能成功拉取到要查询的数据，所以用中间变量将没有选择时间的情况下传给后台的起止时间为空，如果有起止时间时就传给后台选择的起止时间并格式化到毫秒！

用中间变量格式化传参时间的格式，主要是为了不影响插件中的时间显示问题；这样传参时对应后台字段的参数也用中间变量就可以了；其它参数还是绑定表单中对应的字段；

传参实际操作：

1.选定时间：

在时间控件中选定时间

2.控制台看传参是否成功

控制台显示成功传给后台的参数

温馨提示：

我，作为一个神奇的喵系女孩，虽然反射弧稍微迟缓的长那么一点点，但，我必定是一只不容置疑的程序媛大佬！

你可以嘲笑我技术菜，但，你必须告诉我哪里错了，为什么错？

安静的等待本媛的下一篇实习总结吧！