时间范围组件的查询和数据传递形式

LeeyyG

已于 2023-11-28 16:53:50 修改

阅读量210

点赞数

文章标签： vue.js elementui javascript

于 2023-11-28 16:52:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46118142/article/details/134670318

版权

<el-date-picker
        v-model="queryParams.dateRange"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
queryParams: {
      pageNum: 1,
      pageSize: 10,
      licensePlate: null,
      dateRange: [], // 两个时间段包含在一个数组里面，分别为dateRange[0],dateRange[1]
      endReportDate: [], //如果想两个时间段分开显示就拆开写
      beginReportDate: [],
    },
//get请求方式，params包起来
// this.queryParams.params = {};
    // if (null != this.queryParams.dateRange && '' != this.queryParams.dateRange) {
    //   this.queryParams.params["beginReportDate"] = this.queryParams.dateRange[0];
    //   this.queryParams.params["endReportDate"] = this.queryParams.dateRange[1];
    // }

post请求方式，不用包
    if (null != this.queryParams.dateRange && '' != this.queryParams.dateRange) {
      this.queryParams.beginReportDate = this.queryParams.dateRange[0];
      this.queryParams.endReportDate = this.queryParams.dateRange[1];
    }

post请求与get请求的不同

1.post请求获取的是json数据，可以不用params把两个日期字段包起来，前端接口函数的接收参数也需要修改为data

2.如果使用的是get请求，就需要使用params把两个字段包起来，params{["beginReportDate"]，["endReportDate"]}，因为params可以接收任意数量的输入参数，并将它们封装成一个数组。但当使用params包起来后，使用get，post方法均可。记得修改前端接口的数据传递参数