Vue+Element UI-el-date-picker时间日期选择器组件（实现向后端传值）
Vue+Element UI-el-date-picker时间日期选择器组件（实现向后端传值）
Have_MonkeyG
已于2022-09-22 11:36:34修改
3156
收藏
10
文章标签：
前端
vue.js
ui
elementui
于2022-07-04 19:17:53首次发布
一、导入el-date-picker组件
在挂载的div里导入组件:
其中value-format后是自己定义的日期格式，根据自己的需求去修改
@change="dateFormat"是获取时间的方法
v-model是绑定的数据
type是获取的时间的数据类型，datetimerange是字符串类型我们就不需要toString了
<%--时间选择控件--%> <div class="block" style="float:left;margin-right: 15px"> <span class="demonstration">时间范围</span> <el-date-picker v-model="params.date" type="datetimerange" <%--format="HH:mm:ss"--%> value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateFormat"> </el-date-picker> </div> 二、绑定获取的时间值在data数据区内定义相关的时间数据
//时间数据的存放 params: { startTime: '', endTime: '', date: '' },需要注意的是startTime和endTime才是你要获取的真正时间数据
三、使用 @change="dateFormat"方法来获取响应的时间区间在mthods中定义dateFornat方法
注：在上方中我们已经指定数据类型typ=datetimerange，返回的是一个数组。如果使用的是type="daterange"需要进行toString的转换。这两种不管是哪一种我们在后台接数据的时候都不能用Date类型来接要用String类型来接。接下来我们就需要发送请求在后端接数据了
//方法区 methods:{ //获取时间区间方法 dateFormat(picker){ this.params.startTime=picker[0] this.params.endTime=picker[1] //类型是type="daterange" //this.params.startTime=picker[0].toString // this.params.endTime=picker[1].toString }, } 四、向后端发送请求 axios.post("你的后端接口?startTimee="this.params.startTime+"&endTime="+this.params.endTime).then(function(result){ }) 例子 axios.post("/statistics/findBranchTurnover?startTime="+this.params.startTime+"&endTime="+this.params.endTime).then(function (result){ }) 五、后台的接收一定要用String接。