关于elementUI中datepicker遇到的问题

本文探讨了在使用Element UI的Date-Picker组件时遇到的URL参数错误问题,详细记录了从发现错误到问题解决的过程,并分析了错误原因可能是由于参数传递格式不正确导致。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用date-picker组件时

<el-date-picker
              size="small"
              v-model="dataForm.time"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions2">
               </el-date-picker>

同时采取

        this.$http({
          url: this.$http.adornUrl('/tos/edi/ediLog/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'rangeTime': this.dataForm.time
          })

的方式向后台提交

在该处选择时间段后向后台提交时出现
Note: further occurrences of HTTP header parsing errors will be logged at DEBUG level.

java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986
的错误,在网上查说是请求参数的问题,在开发者工具中获取到的请求url为
http://localhost:8080/xxxLog/list?t=1551769503850&page=1&limit=10&rangeTime[]=2019-02-26&rangeTime[]=2019-03-05
因此怀疑是否是和这两个rangeTime有关,于是尝试将时间段分开成两个时间向后台传送,即:

        this.$http({
          url: this.$http.adornUrl('/tos/edi/ediLog/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'beginTime': this.dataForm.time[0],
            'endTime':this.dataForm.time[1]
          })

问题解决,但是这个报错的原因仍然不是很清楚,只是觉得肯定和url有关,还恳请各位大佬指点一下~

### ElementUI 时间选择器与后端交互实现 #### 数据格式转换 为了确保时间选择器所选的时间能够正确地传递到后端并处理,需注意前后端之间的时间戳或字符串表示的一致性。当遇到日期和DatePicker绑定的值相差8小时的情况时,这通常是由于客户端和服务端所在时区不同造成的[^1]。 对于这种情况,在发送请求之前可以先调整时间为UTC标准时间再提交给服务器;而在接收来自服务端的数据时,则应该将其解析回本地时区展示给用户查看。可以通过设置`value-format`属性来指定返回给v-model的具体格式化形式[^5]。 ```html <el-date-picker v-model="selectedDate" type="datetime" placeholder="请选择日期时间" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker> ``` #### AJAX 请求封装 利用axios或其他HTTP库向API发起POST/GET请求,并携带上由ElementUI组件获取到的时间参数作为查询条件之一: ```javascript import axios from 'axios'; // 假设 selectedDate 是通过 el-date-picker 获取到的时间对象 const params = { startTime: this.selectedDate ? moment(this.selectedDate).utc().format() : null, }; axios.post('/api/getData', {params}) .then(response => console.log('Success:', response)) .catch(error => console.error('Error:', error)); ``` 这里使用了moment.js辅助函数来进行时间和时区之间的转换操作,保证两端采用统一的标准进行交流。 #### 后端响应处理 假设后端是以JSON的形式返回数据列表,那么可以在接收到这些信息之后立即更新视图状态,使新的记录显示出来。如果涉及到分页加载更多项的功能,则还需要额外考虑当前页码等因素的影响。 ```javascript this.$nextTick(() => { // 更新表格或者其他容器内的条目集合 }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值