element-plus el-time-picker 时间段选择(可多选)

实现一个如图的时间段选择器

在这里插入图片描述

  1. 处理好时间回显逻辑,组件内[‘’,‘’],后端数据[{startTime:‘’,endTime:‘’}]
  2. 处理好加和减的显示逻辑
<template><div><div v-for="(item, index) in currentChoose" :key="index" class="flex justify-center items-center" :class="index ? 'mt-2': ''"><el-time-pickerv-model="currentChoose[index]"v-bind="_options":disabled="_options.disabled"@change="handleChange(item, index)"/><div class="flex ml-2 w-2" v-if="!_options.disabled"><el-icon @click="plusTime(item, index)"><Plus /></el-icon><el-icon class="ml-2" v-if="index" @click="minusTime(item, index)"><Minus /></el-icon></div></div></div>
</template><script>
export default {name: "multipletimepicker",
};
</script><script setup>
import { ref, computed, watch } from "vue";
import _ from "lodash";const emits = defineEmits(["update:modelValue"
]);const props = defineProps({disabled: {//禁用type: Boolean,default: false,},options: {type: Object,default: () => {},},modelValue: {type: [Array, Object],default: () => ([]),},
});// 设置option默认值,如果传入自定义的配置则合并option配置项
const _options = computed(() => {const option = {'value-format': 'HH:mm','format':"HH:mm",'is-range': true};option.disabled = props.disabled;return Object.assign(option, props.options);
});const currentChoose = ref([]);const created = () => {if (!props.modelValue) {return []}if (props.modelValue instanceof Array) {if (props.modelValue.length) {currentChoose.value = props.modelValue.map(item => {return [item.startTime, item.endTime]})} else {currentChoose.value = [['', '']]}} else {console.log('时间选择插件,非数组格式')}
}const handleChange = () => {handleDataEmits()  
}const minusTime = (item, index) => {if (index === 0) {return;}currentChoose.value.splice(index, 1);handleDataEmits()
}const plusTime = (item, index) => {currentChoose.value.splice(index + 1, 0, [])handleDataEmits()
}// 统一处理数据回显
const handleDataEmits = () => {if (currentChoose.value && currentChoose.value.length) {// 将数组处理成后端数据格式,并触发父组件的model更新const arrFilter = currentChoose.value.filter(item => item)if (!arrFilter.length) {emits('update:modelValue', [{startTime: "", endTime: ""}])return}const arr = arrFilter.map(i => {return {startTime: i[0],endTime: i[1]}})emits('update:modelValue', arr)return arr}emits('update:modelValue', [{startTime: "", endTime: ""}])
}// 数据第一次进入,返显数据
watch(()=>props.modelValue, (val) => {created();
}, { immediate: true })
</script>

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

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

相关文章

Linux的内核态和用户态

一、Linux操作系统运行在两种不同的运行模式下&#xff1a;内核态&#xff08;Kernel Mode&#xff09;和用户态&#xff08;User Mode&#xff09; 内核态&#xff08;Kernel Mode&#xff09;&#xff1a; 内核态也称为特权模式或系统模式&#xff0c;是操作系统内核执行代码…

推荐算法顶会论文博客笔记合集

小小挖掘机学习笔记 https://mp.weixin.qq.com/s/rp2xXueEyT8IKvTr2Qss3A 推荐系统学习笔记 https://blog.csdn.net/wuzhongqiang/category_10128687.html SIGIR SIGIR 2022 | 推荐系统相关论文分类整理&#xff1a;8.74 https://mp.weixin.qq.com/s/vH0qJ-jGHL7s5wSn7Oy…

数据库管理-第184期 23ai:干掉MongoDB的不一定是另一个JSON数据库(20240507)

数据库管理184期 2024-05-07 数据库管理-第184期 23ai:干掉MongoDB的不一定是另一个JSON数据库&#xff08;20240507&#xff09;1 JSON需求2 关系型表设计3 JSON关系型二元性视图3 查询视图总结 数据库管理-第184期 23ai:干掉MongoDB的不一定是另一个JSON数据库&#xff08;20…

数据库表自增主键超过代码Integer长度问题

数据库自增主键是 int(10) unsigned类型的字段&#xff0c;int(M) 中 M指示最大显示宽度&#xff0c;不代表存储长度&#xff0c;实际int(1)也是可以存储21.47亿长度的数字&#xff0c;如果是无符号类型的&#xff0c;那么可以从0~42.94亿。 我们的表主键自增到21.47亿后&#…

信息系统项目管理基础

目录 一、项目管理概论 1、定义 2、项目管理的十二原则 3、SMART原则 4、项目经理 5、项目的生命周期 二、项目立项管理 1、项目启动过程 三、项目整合管理 1、管理基础 2、项目整合管理过程 ①制定项目章程 ②制定项目管理计划 ③指导与管理项目工作 ④管理项目…

Java_从入门到JavaEE_12+13

一、内部类 理解&#xff1a;一个类中再声明另外一个类分类&#xff1a; 成员内部类静态内部类接口内部类局部内部类匿名内部类 1.成员内部类 案例&#xff1a;创建成员内部类的对象&#xff0c;并调用方法 import com.lv.outter_inner_02.Outter.Inner; public class Test {p…

谷歌AlphaFold 3首发Nature,预测精准度提高100%,AI能帮助治疗癌症和免疫病 | 最新快讯

刚刚&#xff0c;顶级科学期刊英国《Nature》&#xff08;自然&#xff09;杂志发表了一份重磅、突破性研究论文。 北京时间 5 月 8 日 23 点&#xff0c;谷歌 DeepMind 和其英国子公司 Isomorphic Labs 联合团队在《自然》杂志上发表一份共 46 页的重要成果&#xff0c;联合发…

使用intro.js实现web页面的引导页

1、引入intro的js和对于的样式&#xff0c;如下&#xff1a; <!-- 引入 Intro.js 的 CSS 文件 --><link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.0.0/introjs.min.css"><!-- 引入 Intro.js 的 JavaScrip…

YOLO系列笔记(十三)——数据集文件夹拆分

数据集文件夹拆分 前言代码说明导入模块设置文件夹路径创建目标文件夹读取和准备图片列表打乱图片顺序计算分配比例定义和使用移动文件函数最后打印分配结果 总结 前言 在学习和训练涉及YOLO等神经网络的过程中&#xff0c;我们通常需要对收集到的大型数据集进行合理的拆分&am…

计算图与自动微分

计算图与自动微分 一、自动梯度计算1.1 数值微分&#xff08;Numerical Differentiation&#xff09;1.2 符号微分&#xff08;Symbolic Differentiation&#xff09;1.3 自动微分&#xff08;Automatic Differentiation&#xff0c;AD&#xff09;1.3.1 计算图1.3.2 正向传播1…

Java Stream

1. Stream API概述 Java 8 Stream是Java 8中引入的一个新的API&#xff0c;用于处理集合和数组等数据结构的元素。它允许您在数据集上进行功能性操作&#xff0c;例如过滤、映射、排序等&#xff0c;而不需要编写循环或迭代器等底层代码。 Java 8 Stream与集合不同&#xff0c;…

超级好用的C++实用库之地理相关接口

&#x1f4a1; 需要该C实用库源码的大佬们&#xff0c;可扫码关注文章末尾的微信公众号二维码&#xff0c;或搜索微信公众号“希望睿智”。添加关注后&#xff0c;输入消息“超级好用的C实用库”&#xff0c;即可获得源码的下载链接。 概述 地理经纬度是地球表面坐标系统中的两…

动态表名 的使用方法

动态表名插件的底层是 拦截器 1&#xff0c;创建一个拦截器 Configuration public class MybatisConfiguration {Beanpublic DynamicTableNameInnerInterceptor dynamicTableNameInnerInterceptor() {// 准备一个Map&#xff0c;用于存储TableNameHandlerMap<String, Table…

MySQL索引(聚簇索引、非聚簇索引)

了解MySQL索引详细&#xff0c;本文只做整理归纳&#xff1a;https://blog.csdn.net/wangfeijiu/article/details/113409719 概念 索引是对数据库表中一列或多列的值进行排序的一种结构&#xff0c;使用索引可快速访问数据库表中的特定信息。 索引分类 主键索引&#xff1a…

如何调用本地ollama的http请求接口

http://127.0.0.1:11434/api/generate 使用http post请求&#xff0c;参数 { "model": "qwen", "prompt": "为什么天空是蓝色?", "stream": false } 返回结果如下&#xff1a; {"model": "qwen",…

Conda安装rasterio报错

Conda安装rasterio报错 文章目录 Conda安装rasterio报错问题解决参考 问题 在conda环境中安装rasterio包之后&#xff0c;本来可以正常运行的&#xff0c;但是之后又重新安装了一个gdal&#xff0c;导致原来的引用rasterio的包的程序不可正常运行了 conda install rasterio c…

面试经典150题——盛最多水的容器

面试经典150题 day28 题目来源我的题解方法一 双指针 题目来源 力扣每日一题&#xff1b;题序&#xff1a;11 我的题解 方法一 双指针 使用两个指针left和right&#xff0c;初始分别指向最左侧和最右侧&#xff0c;然后每次移动矮的一侧。存水量Math.min(height[left],heigh…

基于Springboot的民航网上订票系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的民航网上订票系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…

docker 和 docker-compose

Docker是一种开源的容器化平台&#xff0c;它可以帮助开发人员将应用程序及其所有依赖项打包到一个独立的、可移植的容器中。这意味着您可以在任何地方运行Docker容器&#xff0c;而不需要担心环境差异或依赖项的问题。 Docker Compose是Docker官方提供的一个工具&#xff0c;…

[附源码]石器时代_恐龙宝贝内购版_三网H5手游_带GM工具

石器时代之恐龙宝贝内购版_三网H5经典怀旧Q萌全网通手游_Linux服务端源码_视频架设教程_GM多功能授权后台_CDK授权后台 本教程仅限学习使用&#xff0c;禁止商用&#xff0c;一切后果与本人无关&#xff0c;此声明具有法律效应&#xff01;&#xff01;&#xff01;&#xff0…