VUE 使用el-date-picker 查找时间范围以内的数据

前后端实现一、前端使用el-date-picker如何请求后台二、成功展示一、前端使用el-date-picker如何请求后台<el-form-item label="日期"><el-date-pickerv-model="Times"type="datetimerange"range-separator="至"start-placeholder="开始日期"

爱机车的程序猿

3612人浏览 · 2021-04-30 14:59:13

爱机车的程序猿 · 2021-04-30 14:59:13 发布

前后端实现

一、前端使用el-date-picker如何请求后台
二、成功展示

一、前端使用el-date-picker如何请求后台

 	<el-form-item label="日期">
        <el-date-picker
          v-model="Times"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
     </el-form-item>

使用场景：模糊查询，针对查询
案例操作
在data函数添加dom属性

在方法使用

在这里插入图片描述 请求什么的都一样 Controller–>service–>mapper–>mapper.xml
重点是mapper.xml
请求与返回都是String类型就好

二、成功展示

选中需要的时间
查看网络请求内容以及后台Debug查看请求数据
页面样式

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^