【向后台传日期区间】Vue+Element-ui+DateTimePicker 日期时间选择器往后台传日期区间的问题

需求：根据给定日期的范围查询，将日期传给后端

1.首先使用elementui中时间选择器

 <el-form-item label="时间选择:">
          <el-date-picker
            v-model="params.date"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateFormat"
          >
          </el-date-picker>
        </el-form-item>

2.使用v-model 绑定值

注意： 这里的startTime和endTime才是真正后台接受的值，继续看下面内容

  data() {
    return {
      params: {
        startTime: '',
        endTime: '',
        date: ''
      }}}

3.使用**@change=“dateFormat”**方法，来获取日期区间

在element中加入 *@change=“dateFormat”*方法，上边代码已加，代码直接复制就可以，不需要修改
这里取日期有两种方法：方法二注释了 代码直接复制即可
注意： element中的中的 type="daterange"默认返回的是一个 String类型的数组，所以你在后台接受时不能使用Date类型去接收
完成上面两步以后就要发送请求给后台传数据了，这里需要把上面日期选择器得到的就是 date 转换为字符串

  methods: {
    dateFormat(picker) {
      /* 法一 */
      this.params.startTime = picker[0].toString()
      this.params.endTime = picker[1].toString()
      /* 法二 */
      // let startDate = this.params.date.toString()
      // this.params.startTime = startDate.substring(0, 10)
      // this.params.endTime = startDate.substring(11)
    },
}

如果有看不明白的欢迎留言，希望能帮助到大家