Vue项目开发遇到的问题(二):1-Content-Type常见的两种属性及用法,2-el-date-picker组件修改不了时间,date.getFullYear is not a function

一、Content-Type常见的两种属性:

application/x-www-form-urlencoded;charset=UTF-8   和   application/json

1、Content-Type属性为application/x-www-form-urlencoded;charset=UTF-8,其对应为表单请求体模式Form Data,布尔值或字符串以键值对(key:value)形式发送到服务器时;

2、Content-Type属性为application/json,其对应为Http请求体模式Request Payload,以json字符串的形式发送到后端.

两种不同的属性,需要与后端沟通确定要以哪一种格式提交数据

二、el-date-picker组件修改不了时间

问题如图

Vue项目开发遇到的问题(二):1-Content-Type常见的两种属性及用法,2-el-date-picker组件修改不了时间,date.getFullYear is not a function_第1张图片

Vue项目开发遇到的问题(二):1-Content-Type常见的两种属性及用法,2-el-date-picker组件修改不了时间,date.getFullYear is not a function_第2张图片

 需求是这样,首先需要从后端获取到时间,再将时间放到el-date-picker组件进行展示,展示的同时是允许用户修改,修改后需要将时间传回去给后端。

首先,后端是要求以yyyy-MM-dd HH:mm:ss这种格式发送过去,所以组件设置了value-format='yyyy-MM-dd HH:mm:ss',但此时却出现了上图的问题。我再获取了一下后端发送过来的时间格式,如下图

可以看到从后端接收过来的格式与后端要求发送过去的时间格式yyyy-MM-dd HH:mm:ss是不一致的!!!!!!!!!!!!吐血,不想吐槽了,解决问题重要。

解决方法:

// 修改后台发过来的时间格式
    dateFormat(time) {  
      // 获取单元格数据
      let dt = new Date(time)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },

在获取到后端的时间后,调用这个方法,统一格式为yyyy-MM-dd HH:mm:ss格式,在进行赋值就解决问题了

你可能感兴趣的:(Vue,前端开发,elementui,javascript,vue.js,elementui)