element plus 日期范围 自定义内容

问题:
按照官网上的自定义内容示例,修改日期选择器没有问题,如果修改日期范围选择器,修改后会丢失日期范围选择时的样式。

解决:
从F12中不难看出日期范围的选择样式来自于.el-date-table-cell
在这里插入图片描述
而示例中写的是.cell,所以只需改一下class,再在示例代码的基础上稍作修改就可以了

请添加图片描述

附:示例代码

<template><el-date-pickerv-model="value"type="daterange"start-placeholder="Start Date"end-placeholder="End Date":default-value="[new Date(2021, 10, 1), new Date(2021, 11, 1)]"><template #default="cell"><div class="el-date-table-cell" :class="{ current: cell.isCurrent }"><span class="el-date-table-cell__text">{{ cell.text }}</span><span v-if="isHoliday(cell)" class="holiday"/></div></template></el-date-picker>
</template><script lang="ts" setup>
import {ref} from 'vue'const value = ref('')const holidays = ['2021-10-01','2021-10-02','2021-10-03','2021-10-04','2021-10-05','2021-10-06','2021-10-07',
]const isHoliday = ({dayjs}) => {return holidays.includes(dayjs.format('YYYY-MM-DD'))
}</script>
<style scoped>
.holiday {position: absolute;width: 6px;height: 6px;background: var(--el-color-danger);border-radius: 50%;bottom: 0;left: 50%;transform: translateX(-50%);
}
</style>

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

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

相关文章

文件系统和软硬链接(下)

在这里我们首先学习两个新的知识点第一个&#xff1a; 第二个&#xff1a; 下面我们再来理解思考下面的四个问题&#xff1a; 我们首先来解决第一个问题如果新建一个文件Linux系统会做什么呢&#xff1f; 新建文件&#xff0c;系统会做什么 当我们要新建一个文件的时候&#…

Shell三剑客:sed(命令)二

一、插入命令&#xff1a;i&#xff08;之前&#xff09; [rootlocalhost ~]# sed -r 2i aaaaaaa passwd.txt root:x:0:0:root:/root:/bin/bash aaaaaaa bin:x:1:1:bin:/bin:/sbin/nologin[rootlocalhost ~]# sed -r 2i aaaaaaa\ > bbb\ > ccc passwd.txt root:x:0:0:r…

vue3中ref及reactive的说明

目录 1.响应式说明 2.vue3的ref及reactive的使用 3.reactive响应式失效问题 4.总结 1.响应式说明 vue的响应式是vue框架中的核心概念之一&#xff0c;它是指当数据发生变化时&#xff0c;vue能够自动更新视图。vue2的响应式是基于Object.defineProperty进行实现的。 当你把…

Spring Cloud:Eureka

目录 一、Eureka介绍 1.Eureka的作用 2.总结 二.搭建Eureka服务端步骤 1.导入maven依赖 2.编写启动类&#xff0c;添加EnableEurekaServer注解 3.添加application.yml文件&#xff0c;编写下面的配置&#xff1a; 三.注册Eureka客户端服务提供者&#xff08;user-servic…

【每日OJ—有效的括号(栈)】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 1、有效的括号题目&#xff1a; 1.1方法讲解&#xff1a; 1.2代码实现&#xff1a; 总结 前言 世上有两种耀眼的光芒&#xff0c;一种是正在升起的太阳&#…

系统架构设计师教程(五)软件工程基础知识

软件工程基础知识 5.1 软件工程5.1.1 软件工程定义5.1.2 软件过程模型5.1.3 敏捷模型敏捷开发的特点敏捷方法的核心思想主要敏捷方法简介 5.1.4 统一过程模型 (RUP)RUP的生命周期RUP中的核心概念RUP的特点 5.1.5 软件能力成熟度模型 5.2 需求工程5.2.1 需求获取需求获取的基本步…

HashMap扩容机制详解

目录 1. 扩容的触发条件 2. 扩容的具体步骤 2.1 计算新的容量 2.2 创建新的桶数组 2.3 将元素重新分配到新的桶数组中 2.4 更新容量和阈值 3. 与并发性能的关系 4. 扩容的性能优化 5. 总结 HashMap是Java中常用的数据结构之一&#xff0c;用于存储键值对。在HashMap内…

sql 数据类型注入+tamper

数据类型 数字型 0-9 查询语句&#xff1a; $sql"select * from sy_guestbook where id$i"; 字符型 a-z 中文 标点符号 加入了单引号 查询语句&#xff1a; $sql"select * from sy_guestbook where gTpl$g"; simple order by 16--select * from sy_g…

物联网在能源管理中的应用——青创智通工业物联网解决方案

随着全球能源资源的日益紧张和环境问题的日益突出&#xff0c;能源管理已成为当今社会的重要议题。物联网技术的快速发展为能源管理提供了新的解决方案。本文将介绍物联网在能源管理中的应用及其优势。 一、物联网在能源管理中的应用 1. 智能电网 智能电网是物联网在能源管理中…

Android 生物识别:构建一个存储用户敏感信息的安全应用

前言 在当今数字时代&#xff0c;随着科技的不断发展&#xff0c;用户敏感信息尤为重要。从指纹到面部识别&#xff0c;再到虹膜扫描&#xff0c;生物识别技术为我们带来了便捷性和安全性。本次将构建一个简易的账户信息应用&#xff0c;运用生物识别技术来提高信息的安全性。…

数据结构之预习作业:排序(v1)

看视频&#xff0c;回答以下问题&#xff1a; 1.系统提到了哪些排序场景&#xff1f;除此之外&#xff0c;你还知道哪些信息系统有排序&#xff1f; 2.什么样的排序方法是稳定的&#xff1f;请举例说明 3.插入类排序分为哪几类&#xff1f; 4.若对n个元素进行直接插入排序&…

滑动窗口(一)

滑动窗口 什么是滑动窗口算法&#xff1f;通俗的来讲就是 “同向双指针” &#xff0c;当一组数据的规律含有单调性的时候&#xff0c;就可以使用下面这套逻辑来优化暴力解法。 当两个指针同向移动的时候&#xff0c;类似于一个窗口在滑动。使用于在连续序列里找特殊的子串、…

在centos7上安装docker

1.CentOS安装Docker Docker CE 支持 64 位版本 CentOS 7&#xff0c;并且要求内核版本不低于 3.10&#xff0c; CentOS 7 满足最低内核的要求&#xff0c;所以我们在CentOS 7安装Docker。 1.1.卸载&#xff08;可选&#xff09; 如果之前安装过旧版本的Docker&#xff0c;可…

C语言之递归函数

目录 函数和类型 阶乘 █递归函数调用 函数中可以调用和该函数自身完全相同的函数&#xff0c;这样的调用方式称为递归函数调用&#xff0c;下面我们就来学习相关的基础知识。 函数和类型 所谓递归&#xff08;recursive&#xff09;&#xff0c;就是将自己包含在内&#x…

DataGrip 2023.3 新功能速递!

1 数据可视化 自 DataGrip 2023.3 发布以来&#xff0c;已整合 Lets-Plot 库&#xff0c;实现数据可视化。该可视化功能可用于所有三种类型的网格&#xff1a; 主选项卡&#xff1a;在打开表、视图或 CSV 文件时&#xff0c;在分割模式下显示图表。结果选项卡&#xff1a;在 服…

centos安装opencv并在springboot中使用

使用conda安装opencv&#xff0c;并在docker运行的容器中使用&#xff0c;这里以运行则springboot应用的容器为例 步骤一&#xff1a;安装 在conda中安装 # 安装依赖 conda install numpy matplotlib# 安装opencv conda install -c conda-forge opencv # 或者制定版本 conda…

安装android studio

记录一下安装android studio的过程&#xff1a; 1.首先安装android studio到某一文件夹后&#xff0c;在C盘用户目录下可以看到.android文件夹。C:\Users\22515\AppData\Local\Google目录下也会出现AndroidStudio2022.2文件夹。&#xff08;注意&#xff1a;用户名&#xff0c…

一种缩小数据之间差距的算法

先上代码&#xff1a; /** * 缩小数据之间的差距&#xff0c;但是大小关系不变的方法* param {Array} features */function minMaxData(data) {for (let i 0; i < data.length; i) {const f data[i];const x f[1];const yf[2];//此处5根据实际情况设置const y2 Math.pow(…

LeedCode刷题---二分查找类问题

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、二分查找 题目链接&#xff1a;二分查找 题目描述 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一…

开源学习项目推荐

文章目录 koodo-reader凤凰架构学习项目NPS 内网穿透客户端 koodo-reader 项目地址&#xff1a;https://github.com/koodo-reader/koodo-reader 介绍&#xff1a;一个开源的阅读器&#xff0c;阅读pdf也有目录&#xff0c;作为epub阅读器和pdf阅读器看资料挺好 凤凰架构 项…