vue+element 项目使用el-date-picker做搜索查询

最新推荐文章于 2024-06-12 17:01:30 发布
最新推荐文章于 2024-06-12 17:01:30 发布
阅读量1.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41727900/article/details/103975022
版权

项目使用el-date-picker 做查询的功能，可以做出来，但是写的比较复杂

自己写的： 搜索的数据都绑定在v-model的对象中，对接口传数据只需要传对象过去。 这种其他的input框传过去是没有问题的，就是多选时间格式不对。 时间选择好后是数组格式，需要把选好后的时间转化成以下的格式

{
 "carCode":"测试车牌号",
 "unloadingNo":"20010812390000",
 "outTime":{
  "startDate":"2020-01-07 12:39:19",
  "endDate":"2020-01-09 12:39:19"
 }
}

修改之后的传值： 创建一个临时的对象（为需要传给后台的数据），搜索的时候传临时对象 

深蓝色的想念
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Element中el-date-picker组件不回填的情况
01-21
当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求，比如： 新建一个活动，需要定义活动的时间范围； 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上...
element ui 开始时间小于结束时间大于当前时间
Just_Meen的博客
10-24 1243
HTML部分： <div class="userInfo annTit"> <el-form-item label="开始时间"> <el-date-picker type="datetime" :clearable="false" v-mode...
el-input、el-date-picker、el-select搜索框筛选数据
新人一枚，互相学习哦！
03-13 880
el-ement-UI 搜索框依据关键词筛选数据
el-date-picker(vue3 总结)
最新发布
qq_38210427的博客
06-12 314
el-date-picker的icon放右边显示-CSDN博客
vue实现搜索功能
ddf__的博客
02-15 231
过filter过滤到有那个值的，如果有就对表格进行赋值，如果日期选择器的值为空那就重新调用列表。通过列表里面的月份来进行搜索。
Vue + el-date-picker日期时间控件实现今天、昨天、上周、上一个月等功能
假人一个的博客
09-06 3472
 有时我们需要搜索对应时间段的内容，我们就可以用el-date-picker这个日期时间控件来实现 0. 整体代码： 【效果】： 【栗子代码】： <template> <div> <el-col :span="10"> <el-row align="middle"> <el-col :span="4" ><label>时间范围：</label></el-col> .
vue中,element UI 时间控件（一）——@chang和@blur区别
weixin_44867717的博客
09-28 1188
vue中,element UI 时间控件（一）——@chang和@blur区别 官方文档 应用-@change =‘getStartTime($event)’ 结构 <el-form-item label='调休时段' prop='selectEndTime'> <el-time-select placeholder="起始时间" v-model="form.selectStartTime"
vue+element-ui DateTimePicker组件分钟设置步长step
05-17
在Vue.js框架中，Element-UI是一个非常流行的前端UI组件库，它提供了丰富的组件供开发者构建用户界面。本文将深入探讨如何在DateTimePicker组件中设置分钟的步长（step）。 DateTimePicker是Element-UI中用于日期和...
最全 element UI el-date-picker组件换色（less）
11-23
element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器
elementui elementUI - date-picker.zip
03-02
在 ElementUI 中，`<el-date-picker>` 是这样一个组件，它支持多种格式的日期输入，包括年、月、日、小时和分钟等。默认情况下，时间选择器的时间间隔（步长）是半小时，即每点击一次上下箭头，时间会递增或递减30...
vue 结合element 实现时间搜索功能
qq_41038929的博客
08-07 2001
要实现的效果如下： 页面代码如下： <el-select v-model="dateValue" clearable placeholder="全部时间" size="medium" style="margin: 0 30px 20px 0" @change="timeSearch()"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"&
vue element 框架中，搜索部分日期的设置
jiuweiyaoy的博客
03-03 731
可选时间为今天以前的日期，并且 开始日期要大于结束日期
elementUI 时间选择器常用配置详解
lwx931449660的博客
04-18 3335
elementUI提供了时间选择器等组件，使得我们可以快速的搭建项目，完成相关功能，说下时间选择器的常用配置项 常用配置可以参考elementUI官网查看，包括选择日，周，月，年，多个日期，或者选择时间范围，不同的类型取决于 时间组件配置项type的不同 实际应用时需要许多特殊要求，这里大概分享下 // 简单的时间选择器应用 <el-date-picker v-model="...
element UI-时间选择器（el-date-picker）
JustDI0209的博客
05-09 9424
1.实现只选择年份 <el-form-item label="查询年份：" label-width="82px"> <el-date-picker style="width: 140px" v-model="formResult.year" type="year" ...
el-date-picker设置右侧显示图标，时间选择后：滑入显示清除icon，显示清除图标
weixin_49717920的博客
02-01 4478
el-date-picker设置右侧显示图标，时间选择后：滑入显示清除icon，显示清除图标
vue+element 封装日期范围组件（双向绑定）
Start2019
08-04 3581
列举说明关于输入框双向绑定 v-model 的过程。日期组件在后台管理项目中使用较多的，而且加了快捷选项，代码容易冗余，因此封装成组件。
element-使用el-date-picker 选择日期后返回周几（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-24 2146
<template> <div class="workday"> <el-date-picker v-model="dayData" type="date" placeholder="选择日期" @change="dataChange(dayData)" /> <div>{{week}}</div> </div> </template> <script> export default {
element-ui el-date-picker日期限制只能选当天和昨天 element-ui el-date-picker日期禁止选择今天以前的日期
weixin_45869649的博客
09-13 6119
element-ui el-date-picker日期限制只能选当天和昨天 害，一般都是禁止选今天之前的日期，或者禁止选今天之后的日期，这又来了 这小问题卡了我一小时 虽然找大哥帮忙解决了 ，但是我觉得大哥写的代码有点多，而且我并不能很好的理解，所以我就琢磨出来了。 来个图： 1、element-ui el-date-picker日期禁止选择日期 主要**:picker-options=“pickerOptions”** <el-date-picker v-model="queryInfo.tim
vue3+ts el-date-picker年月日取值
07-28
根据提供的引用内容，可以看出在Vue3+TS中使用el-date-picker组件来获取年月日的取值。在模板中，可以使用v-model指令将选择的日期绑定到相应的数据属性上。例如，可以使用value1、value2和value3来分别绑定年、月和日的取值。\[1\] 在方法中，可以使用getdatetime()方法来给value1、value2和value3赋值，将它们初始化为当前日期。\[3\] 另外，如果需要将时间控件的格式转换为特定的格式，可以使用format属性来指定日期的显示格式。例如，可以使用"yyyy年"来显示年份，"MM月"来显示月份，"dd日"来显示日期。\[1\] 如果需要获取完整的日期和时间，可以使用type属性设置为"datetime"，并使用value-format属性来指定日期和时间的格式，例如"yyyy-MM-dd HH:mm"。\[2\] 总结起来，使用el-date-picker组件可以通过v-model指令和format属性来获取年月日的取值，使用type属性和value-format属性来获取完整的日期和时间的取值。 #### 引用[.reference_title] - *1* *3* [vue-element日期选择器（默认显示当前年月日，并且只能选择当前及当前之前的日期）](https://blog.csdn.net/m0_50899555/article/details/122962517)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [el-date-picker时间插件获取值格式问题](https://blog.csdn.net/u014572906/article/details/108003894)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值