vue3中单框双时间选择模式

在单框双时间选择下,给当前时间框赋值,可以使用vue中的v-model双向绑定方式

如前端元素代码:

<el-form-item label="创建时间" style="width: 308px;"><el-date-pickerv-model="dateRange"value-format="YYYY-MM-DD HH:mm:ss"type="daterange"range-separator="-"start-placeholder="开始日期"end-placeholder="结束日期":default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker></el-form-item>

js代码:

const dateRange = ref([]);/** 查询用户列表 */
function getList() {loading.value = true;//listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {if(dateRange.value){console.log("进来了");queryParams.value.beginTime=dateRange.value[0];queryParams.value.endTime=dateRange.value[1];}else{queryParams.value.beginTime=null;queryParams.value.endTime=null;}console.log(dateRange.value);console.log(queryParams.value);listUser(queryParams.value).then(res => {loading.value = false;userList.value = res.items;total.value = res.totalCount;});
};

当选择完时间后,dateRange值就是一个数组形式,如下:

 这里看到有如下代码

const { proxy } = getCurrentInstance(); 

listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then();

 addDateRange这个是全局封装的一个方法

// 添加日期范围

export function addDateRange(params, dateRange, propName) {

  let search = params;

  search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};

  dateRange = Array.isArray(dateRange) ? dateRange : [];

  if (typeof (propName) === 'undefined') {

    search.params['beginTime'] = dateRange[0];

    search.params['endTime'] = dateRange[1];

  } else {

    search.params['begin' + propName] = dateRange[0];

    search.params['end' + propName] = dateRange[1];

  }

  return search;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/625709.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览器工作原理与实践--HTTPS:让数据传输更安全

浏览器安全主要划分为三大块内容&#xff1a;页面安全、系统安全和网络安全。前面我们用四篇文章介绍了页面安全和系统安全&#xff0c;也聊了浏览器和Web开发者是如何应对各种类型的攻击&#xff0c;本文是我们专栏的最后一篇&#xff0c;我们就接着来聊聊网络安全协议HTTPS。…

数据结构速成--栈

由于是速成专题&#xff0c;因此内容不会十分全面&#xff0c;只会涵盖考试重点&#xff0c;各学校课程要求不同 &#xff0c;大家可以按照考纲复习&#xff0c;不全面的内容&#xff0c;可以看一下小编主页数据结构初阶的内容&#xff0c;找到对应专题详细学习一下。 目录 一…

nuxt3项目使用swiper11插件实现点击‘’返回顶部按钮‘’返回到第一屏

该案例主要实现点击返回顶部按钮返回至swiper第一个slide。 版本&#xff1a; "nuxt": "^3.10.3", "pinia": "^2.1.7", "swiper": "^11.0.7", 官方说明 swiper.slideTo(index, speed, runCallbacks) Run transit…

MyBatisPlus自定义SQL

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉🍎个人主页:Leo的博客💞当前专栏: 循序渐进学SpringBoot ✨特色专栏: MySQL学习 🥭本文内容:MyBatisPlus自定义SQL 📚个人知识库: Leo知识库,欢迎大家访问 目录 1.前言☕…

(BERT蒸馏)TinyBERT: Distilling BERT for Natural Language Understanding

文章链接&#xff1a;https://arxiv.org/abs/1909.10351 背景 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;预训练语言模型&#xff08;如BERT&#xff09;通过大规模的数据训练&#xff0c;已在多种NLP任务中取得了卓越的性能。尽管BERT模型在语言理解和生成…

SQL-DML数据操纵语言(Oracle)

文章目录 DML数据操纵语言常见的字段属性字符型字段属性char(n)varchar2(n)/varchar(n) 数值型字段属性number([p],[s]int 日期型字段属性DATEtimestamp 如何查看字段属性增加数据INSERT快捷插入 删除数据DELETE修改数据UPDATE DML数据操纵语言 定义 是针对数据做处理&#xf…

探索数据结构:BF与KMP的灵活应用

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty’s blog 1. 什么是字符串匹配算法 字符串匹配是计算机科学中的一个基础概念&…

MBR30100PT-ASEMI肖特基二极管MBR30100PT

编辑&#xff1a;ll MBR30100PT-ASEMI肖特基二极管MBR30100PT 型号&#xff1a;MBR30100PT 品牌&#xff1a;ASEMI 封装&#xff1a;TO-247 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;30A 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;10…

办公网数据防泄密解决方案丨深度解析

企业数据已成为其最宝贵的资产之一。 然而&#xff0c;办公自动化的推进和网络技术的普及&#xff0c;导致数据泄露的风险也日益加剧。 为了有效应对这一挑战&#xff0c;越来越多的企业开始寻求专业的数据防泄密解决方案。 其中&#xff0c;域智盾软件以其卓越的性能和全面的…

保护C#代码的艺术:深入浅出代码混淆技术

摘要 在C#开发中&#xff0c;代码的保护是一个不可忽视的问题。本文深入探讨了几种常用的C#代码混淆工具&#xff0c;帮助开发者理解如何有效地保护代码不被反编译。同时&#xff0c;本文也对混淆技术的优缺点进行了分析&#xff0c;并提供了一些实际使用的建议。 引言 C#是…

Python简化远程部署和系统管理的工具库之fabric使用详解

概要 Python Fabric库是一个用于简化远程部署和系统管理的工具库。它提供了一组简洁而强大的函数和工具,可以帮助开发者轻松地在多台远程主机上执行命令、上传文件、下载文件等操作,从而实现自动化部署和管理。 安装 要使用Python Fabric库,首先需要安装Fabric模块。可以通…

IDM2024破解版 IDM软件破解注册序列号 idm教程 idm序列激活永久授权 Internet Download Manager网络下载加速神器

你是不是感觉下载东西资源的时候&#xff0c;下载的非常慢&#xff0c;即便是五十兆的光纤依旧慢、是不是想下载网页上的视频但不知如何进行下载……这些问题是否一直在困扰着您&#xff0c;今日小编特意我大家带来了这款IDM 2024破解版。 众所周知&#xff0c;IDM是一款功能强…