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…

PMP中的PDU是什么?PDU常见问题合集

为项目管理领域含金量最高的认证&#xff0c;PMP在国内受到了越来越多人的追捧&#xff0c;在PMP学习备考过程中&#xff0c;很多人都听说过“PDU”这个词&#xff0c;那么这个词是什么意思呢&#xff1f;下面小编就为您详细解读。 一、PDU是什么&#xff1f; PDU&#xff08…

TWS蓝牙耳机的船运模式

TWS蓝牙耳机的船运模式 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)?可加我微信hezkz17, 本群提供音频技术答疑服务,+群赠送语音信号处理降噪算法,蓝牙耳机音频,DSP音频项目核心开发资料, TWS蓝牙耳机的船运模式是指在将耳机从一个地方运送到另一个地方时,…

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 需求获取需求获取的基本步…

CAN静默回环模式测试

本文章主要用于 看自己写的CAN协议代码是否正确 然后因为只有一块板子&#xff0c;不能通信的情况 can.h #ifndef __CAN_H #define __CAN_H#include "head.h"extern FlagStatus can0_receive_flag; extern FlagStatus can0_error_flag; extern can_trasnmit_messag…

HashMap扩容机制详解

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

Electron 打开开发者工具 devtools

Electron 打开开发者工具 devtools 在electron开发的过程中&#xff0c;可以用代码控制打开自带chrome的devtools开发者工具&#xff0c;进而调试渲染教程页面。 平时&#xff0c;我们利用chrome要调试网页的时候&#xff0c;按F12&#xff08;mac下面是shift花i&#xff09;…

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. 智能电网 智能电网是物联网在能源管理中…

vue 高频面试题

vue 高频面试题 0.那你能讲一讲MVVM吗&#xff1f; MVVM是Model-View-ViewModel缩写&#xff0c;也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型&#xff0c;View代表UI组件&#xff0c;ViewModel是View和Model层的桥梁&#xff0c;数据会绑定到viewModel层…

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

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

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

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

C++ 单词替换

输入一个字符串&#xff0c;以回车结束&#xff08;字符串长度不超过 100 &#xff09;。 该字符串由若干个单词组成&#xff0c;单词之间用一个空格隔开&#xff0c;所有单词区分大小写。 现需要将其中的某个单词替换成另一个单词&#xff0c;并输出替换之后的字符串。 输入…

使用Java实现简单的网络爬虫,并使用代理IP

目录 前言 一、了解网络爬虫的基本原理与流程 二、选择合适的技术与工具 三、编写代码实现网络爬虫 四、解析网页内容 总结 前言 网络爬虫是一种自动化程序&#xff0c;用于从互联网上抓取信息。它可以帮助我们快速地获取大量数据&#xff0c;并进行分析和处理。在实际应…

滑动窗口(一)

滑动窗口 什么是滑动窗口算法&#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;可…