当前位置: 首页 > news >正文

Element中的日期时间选择器DateTimePicker和级联选择器Cascader

简述:在Element UI框架中,Cascader(级联选择器)和DateTimePicker(日期时间选择器)是两个非常实用且常用的组件,它们分别用于日期选择和多层级选择,提供了丰富的交互体验和便捷的数据输入方式。这里来简单记录一下



 一. 日期时间选择器,DateTimePicker

 <el-date-pickerv-model="timeValue1"type="datetimerange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"format="yyyy-MM-dd HH:mm:ss"   <!-- 显示格式 -->value-format="yyyy-MM-dd HH:mm:ss"  <!-- 绑定值的格式 -->>
</el-date-picker><!-- 日期时间选择器 -->
<el-date-pickerv-model="timeValue1"                  绑定到 timeValue1 数据type="datetimerange"                  类型为日期时间范围range-separator="至"                  范围分隔符start-placeholder="开始日期"           开始日期占位符end-placeholder="结束日期"             结束日期占位符format="yyyy-MM-dd HH:mm:ss"          显示格式value-format="yyyy-MM-dd HH:mm:ss"    绑定值的格式 
></el-date-picker>

二. 级联选择器,Cascader

<el-cascader:options="options":props="props"collapse-tagsclearablev-model="selectedOptions"
></el-cascader><!-- 级联选择器 -->
<el-cascaderv-model="selectedOptions"    绑定到 selectedOptions 数据:options="options"           选择器选项:props="props"               选择器属性collapse-tags                收起标签clearable                    可清除图标显示
></el-cascader>

三. 参数属性

// 日期时间选择参数
timeValue1: "",// 级联选择器参数
options: [],
// ⭐注意这里的props需要额外配置,否则获取到的值为undefined
props: {multiple: true,value: "id",label: "label",
},
selectedOptions: [],// 定义参数数据
data() {return {// 日期时间选择参数timeValue1: "", // 绑定日期时间选择器的值// 级联选择器参数options: [], // 选择器选项数据// ⭐注意这里的props需要额外配置,否则获取到的值为undefinedprops: {multiple: true, // 支持多选value: "id", // 选项的值字段label: "label", // 选项的标签字段},selectedOptions: [], // 绑定级联选择器的值,保存选择的事件类型id};
},

四. 触发事件

choseSearch() {this.tableLoading = true;if (this.timeValue1.length === 0 || this.selectedOptions.length === 0) {console.error("请确保选择了日期范围和事件类型");return;}// console.log(this.timeValue1);// console.log(this.selectedOptions);const choseData = this.selectedOptions.map((cur) => {// console.log(cur);return cur[1];});// console.log(choseData);const ecentParams = {startTime: this.timeValue1[0],endTime: this.timeValue1[1],eventTypeIds: choseData,};// console.log(ecentParams);eventData(ecentParams, this.params).then((res) => {console.log(res);if (res.code === 200) {......}});
},// 点击事件
choseSearch() {this.tableLoading = true; // 设置表格加载状态// 检查是否选择了日期范围和事件类型if (this.timeValue1.length === 0 || this.selectedOptions.length === 0) {console.error("请确保选择了日期范围和事件类型");return; // 如果未选择,退出方法}// 处理选中的事件类型ID,将每个选中的值的第二个元素(事件类型ID)提取出来const choseData = this.selectedOptions.map((cur) => {return cur[1];});// 创建查询参数对象const ecentParams = {startTime: this.timeValue1[0], // 设置开始时间endTime: this.timeValue1[1], // 设置结束时间eventTypeIds: choseData, // 设置选中的事件类型ID};// 调用API方法,传递查询参数eventData(ecentParams, this.params).then((res) => {console.log(res); // 打印API响应结果if (res.code === 200) {// 处理成功响应......}});
},

相关文章:

Element中的日期时间选择器DateTimePicker和级联选择器Cascader

简述&#xff1a;在Element UI框架中&#xff0c;Cascader&#xff08;级联选择器&#xff09;和DateTimePicker&#xff08;日期时间选择器&#xff09;是两个非常实用且常用的组件&#xff0c;它们分别用于日期选择和多层级选择&#xff0c;提供了丰富的交互体验和便捷的数据…...

Construct公司 从 0 到 1 基于 Kitex+Istio 的微服务系统建设

本文根据 2024 年 5 月 25 日在上海举办的“云原生✖️AI 时代的微服务架构与技术实践”CloudWeGo 技术沙龙上海站活动中&#xff0c;Construct 服务端总监 Jason 的演讲《从 0 到 1 基于 Kitex Istio 的微服务系统建设》整理而来。 在微服务架构的浪潮中&#xff0c;企业面临…...

day04-组织架构

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.组织架构-树组件应用树形组件-用层级结构展示信息&#xff0c;可展开或折叠。 2.组织架构-树组件自定义结构3.组织架构-获取组织架构数据4.组织架构-递归转化树形…...

Web3 开发者入门手册:技能、工具和职业前景

原文&#xff1a;https://remote3.co/blog-post/how-to-become-a-web3-developer 作者&#xff1a;Paul Anderson 编译&#xff1a;TinTinLand Web3 是 2024 年科技领域最受瞩目的话题之一——Web3 令人激动的实用潜力可以跨越多个行业&#xff0c;早期采用者更有机会在未来…...

元宇宙虚拟实景展馆树立客户对企业的信任和好感

在数字化浪潮的推动下&#xff0c;企业迎来了前所未有的营销新机遇——3D数字展厅。3D数字展厅作为现代营销中的新型工具&#xff0c;不仅是企业与客户互动、传递信息的桥梁&#xff0c;更是企业展示实力、彰显品牌魅力的舞台。 辽宁3D数字展厅制作以其独特的设计理念和先进的制…...

【C语言】宏定义在 a.c 中定义,如何在 b.c 中使用?

宏定义的概念和使用原理 在 C 语言中&#xff0c;宏定义是一种预处理器指令&#xff0c;用于定义常量或者宏函数。宏在编译之前由预处理器展开&#xff0c;因此可以用来提高代码的可读性和维护性。宏定义使用 #define 指令&#xff0c;形式如下&#xff1a; #define 宏名 替换…...

vue3 滚动条滑动到元素位置时,元素加载

水个文 效果 要实现的思路就是&#xff0c;使用IntersectionObserver 检测元素是否在视口中显示&#xff0c;然后在通过css来进行动画载入。 1.监控元素是否视口中显示 const observer new IntersectionObserver((entries) > {entries.forEach((entry) > {if (entry.i…...

[Linux] 相对路径(Relative Path)与绝对路径(Absolute Path)

说明&#xff1a; 在编写shell脚本来管理系统或其他一般情况时&#xff0c;推荐使用绝对路径。因为在某些时候工作的环境或文件管理时发生变化可能导致某些绝对路径是有冲突的&#xff0c;这会产生一些问题。 比如在清华大学的第一教学楼里面有一个机器人实验室&#xff0c;文件…...

[ESP32] I2S播放wav文件

//代码&#xff1a;循环播放4首内置的wav音乐&#xff0c;I2S连接d类功放用NS4168芯片 //文件取样格式&#xff1a;Wave PCM 签字的 16bit, 采样频率:16KHz ,比特率705kbps //demo工程打包下载&#xff1a;https://download.csdn.net/download/wabil/89515015 #include <…...

YOLOv8

YOLOv8 设计快速、准确且易于使用&#xff0c;使其成为各种物体检测与跟踪、实例分割、图像分类和姿态估计任务的绝佳选择框架 1.安装YOLOv8 创建虚拟环境 conda create --name ros2 python3.10 激活虚拟环境 conda activate ros2 安装组件 pip install ultralytics -i h…...

协程调度模块

什么是协程和协程调度&#xff1f; 基本概念 协程 协程是一种比线程更轻量级的并发编程结构&#xff0c;它允许在函数执行过程中暂停和恢复执行状态&#xff0c;从而实现非阻塞式编程。协程又被称为用户级线程&#xff0c;这是由于协程包括上下文切换在内的全部执行逻辑都是…...

2024 最新docker仓库镜像,6月,7月

目前下面的docker仓库镜像源还能使用。 vi /etc/docker/daemon.json添加如下配置{"registry-mirrors": ["https://hub.uuuadc.top", "https://docker.anyhub.us.kg", "https://dockerhub.jobcher.com", "https://dockerhub.icu&…...

探索Vim的文本处理能力:精通查找与替换

探索Vim的文本处理能力&#xff1a;精通查找与替换 Vim&#xff0c;作为Linux终端下的王牌文本编辑器&#xff0c;以其强大的功能和灵活性深受开发者和系统管理员的喜爱。在Vim中进行查找和替换是文本编辑中的一项基础且重要的操作。本文将详细解释如何在Vim中执行查找和替换文…...

2024.7.4学习日报

1、ppt前三章 5日计划 1、至少做到实验 2、java...

享元模式(Flyweight Pattern)

享元模式&#xff08;Flyweight Pattern&#xff09; 定义 享元模式通过共享技术来支持大量细粒度的对象&#xff0c;以减少内存中的对象数量。其核心思想是将对象的状态分为内部状态和外部状态&#xff0c;内部状态是不变的&#xff0c;可以被多个对象共享&#xff1b;外部状…...

Oracle连接mysql

oracle使用的11g&#xff0c;在一台windows服务器&#xff1b;mysql使用的是5.7版本&#xff0c;在另一台windows服务器&#xff0c;这两个服务器之间的网络是互通的。做BI时&#xff0c;要获取不同数据源的数据&#xff0c;这些数据源可能是Oracle&#xff0c;也可能是sqlserv…...

golang 垃圾回收

gc不回收什么 GC 不负责回收栈中的内存栈是一块专用内存&#xff0c;专门为了函数执行而准备的&#xff0c;存储着函数中的局部变量以及调用栈栈中的数据可以通过简单的编译器指令自动清理&#xff0c;也就不需要通过 GC 来回收了 垃圾回收算法 主流的两类垃圾回收算法有两种&a…...

React 中如何使用 Monaco

Monaco 是微软开源的一个编辑器&#xff0c;VSCode 也是基于 Monaco 进行开发的。如果在 React 中如何使用 Monaco&#xff0c;本文将介绍如何在 React 中引入 Monaco。 安装 React 依赖 yarn add react-app-rewired --dev yarn add monaco-editor-webpack-plugin --dev yarn…...

开源RAG个人知识库项目开发分析

前言 Hello&#xff0c;大家好&#xff0c;我是GISer Liu&#x1f601;&#xff0c;一名热爱AI技术的GIS开发者&#xff0c;这个LLM开发基础阶段已经进入尾声了&#xff0c;本文中我们不介绍更多的理论与知识点&#xff0c;而是通过的分析开源项目的解决方案来帮助各位开发者理…...

事务底层与高可用原理

1.事务底层与高可用原理 事务的基础知识 mysql的事务分为显式事务和隐式事务 默认的事务是隐式事务 显式事务由我们自己控制事务的开启&#xff0c;提交&#xff0c;回滚等操作 show variables like autocommit; 事务基本语法 事务开始 1、begin 2、START TRANSACTION&…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...