element plus 日期范围 自定义内容

news2024/10/5 0:49:13

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

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

请添加图片描述

附:示例代码

<template>
  <el-date-picker
      v-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.coloradmin.cn/o/1321968.html

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

相关文章

23--数据结构简述

常见的数据结构 数据存储的常用结构有&#xff1a;栈、队列、数组、链表和红黑树。 1、栈 特点&#xff1a;先进后出 2、队列 特点&#xff1a;先进先出 3、数组 数组特点&#xff1a;查询快 &#xff0c; 增删慢 整形数组&#xff1a; 对象数组&#xff1a; 4、链表 链…

案例分享|企业为什么要选择数字化转型?

数字化在现代社会中扮演着重要的角色&#xff0c;成为企业转型的必由之路。随着科技的发展和信息化的进程&#xff0c;越来越多的企业开始拥抱数字化转型&#xff0c;以应对市场的变化和竞争的压力。数字化带来了诸多好处&#xff0c;不仅提高了企业的效率和生产力&#xff0c;…

阿里云登录镜像仓库报错: Error response from daemon: Get https://

阿里云登录镜像仓库报错: Error response from daemon: Get https:// 1. 故障现象 开发反应自用笔记本连接镜像仓库是正常的,但通过服务器连接镜像仓库一直失败. 报错信息如下: Error response from daemon: Get https://registry.cn-hangzhou.aliyuncs.com/v2/: unauthoriz…

力扣刷题记录(16)LeetCode:62、63、343、96

目录 62. 不同路径 63. 不同路径 II 343. 整数拆分 96. 不同的二叉搜索树 总结 这题比较简单&#xff0c;直接声明一个二维数组来保存到达该点有几种路径。到达当前点的方法由当前点的左边格子和右边格子决定。 class Solution { public:int uniquePaths(int m, int n)…

美国联邦机动车安全标准-FMVSS

FMVSS标准介绍&#xff1a; FMVSS是美国《联邦机动车安全标准》&#xff0c;由美国运输部下属的国家公路交通安全管理局(简称NHTSA)具体负责制定并实施。是美国联邦政府针对机动车制定的安全标准&#xff0c;旨在提高机动车的安全性能&#xff0c;减少交通事故中的人员伤亡。F…

构建智慧储能物联网,4G工业路由器远程监测在线管理

物联网技术的发展为智慧储能管理带来了革命性的变化。其中&#xff0c;4G工业路由器IR5000通过丰富的连接能力如串口RS485/232或网口的方式&#xff0c;实现了与储能现场各设备的连接&#xff0c;包括电表、电能检测器、防孤岛装置、BMS电池管理系统、监控服务器、储能控制器、…

万户OA text2Html接口存在任意文件读取漏洞

文章目录 产品简介漏洞概述指纹识别漏洞利用修复建议 产品简介 ezoffice是万户网络协同办公产品多年来一直将主要精力致力于中高端市场的一款OA协同办公软件产品&#xff0c;统一的基础管理平台&#xff0c;实现用户数据统一管理、权限统一分配、身份统一认证。统一规划门户网…

react基于antd二次封装spin组件

目录 react基于antd二次封装spin组件组件使用组件效果 react基于antd二次封装spin组件 组件 import { Spin } from antd; import propTypes from "prop-types"; import React from react; import styleId from "styled-components"; // 使用 父div必须加…

HTML5+CSS3小实例:纯CSS实现网站置灰

实例:纯CSS实现网站置灰 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="…

【1.10计算机组成与体系结构】校验码

目录 1.奇偶校验2.循环校验码CRC3.各个校验码的区别&#xff08;海明校验&#xff09; 1.奇偶校验 &#x1f7e2; 奇偶校验码的编码方法是: 由若干位有效信息 (如一个字节) &#xff0c;再加上一个二进制位 (校验位) 组成校验码。 &#x1f7e2; 奇校验:整个校验码 (有效信息位…

【MAC】M2 安装docker 与 mysql

一、docker下载地址 下载地址 二、安装docker完成 罗列一下docker常用命令 # 查看docker版本 docker --version# 拉取镜像 docker pull 镜像名# 查看当前所有镜像 docker images# 查看运行中的容器 docker ps -a docker ps grep| 镜像名#镜像启动操作&#xff1a; sudo dock…

[MySQL] MySQL中的内外连接

文章目录 一、内连接 1、1 概念及语法 1、2 实例讲解 二、外连接 2、1 概念及语法 2、2 左外连接 2、3 右外连接 &#x1f64b;‍♂️ 作者&#xff1a;Ggggggtm &#x1f64b;‍♂️ &#x1f440; 专栏&#xff1a;MySQL &#x1f440; &#x1f4a5; 标题&#xff1a;MySQL中…

issue阶段的选择电路的实现

1-of-M的仲裁电路 为什么要实现oldest-first 功能的仲裁呢&#xff1f; 这是考虑到越是旧的指令&#xff0c;和它存在相关性的指令也就越多&#xff0c;因此优先执行最旧的指令&#xff0c;则可以唤醒更多的指令&#xff0c;能够有效地提高处理器执行指令的并行度,而且最旧的指…

基于PyCharm实现串口GUI编程

工具效果如下如所示 下面简单介绍一下操作流程 1.打开PyCharm软件 2.创建一个工程 3.给该工程命名 4.在main.py里面黏贴如下的代码 # This is a sample Python script. # Press ShiftF10 to execute it or replace it with your code. # Press Double Shift to search everyw…

LeetCode 583两个字符串的删除操作 72编辑距离 | 代码随想录25期训练营day56

动态规划算法13 LeetCode 583 两个字符串的删除操作 2023.12.19 题目链接代码随想录讲解[链接] int minDistance(string word1, string word2) {//思路1&#xff0c;求除了最长公共序列外&#xff0c;两个字符串需删除的字符数//以下为求最长公共序列长度的动态规划方法/*v…

竞赛保研 Yolov安全帽佩戴检测 危险区域进入检测 - 深度学习 opencv

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; Yolov安全帽佩戴检测 危险区域进入检测 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&am…

基于SSM的通用权限管理系统

基于SSM的通用权限管理系统 一、系统介绍二、功能展示1.项目骨架2.登录3.主页 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目名称&#xff1a;基于SSM的权限管理系统案例 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 前端技术&#xff1a;Layui等 …

xcrun: error: invalid active developer path

macOS升级完成后出现 xcrun: error: invalid active developer path问题。 xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun这是由于 Xcode command line tools 丢…

03-数据结构-栈与队列

1.栈 栈和队列是两种操作受限的线性表。如上图所示显示栈的结构 栈&#xff1a;先进后出&#xff0c;入栈&#xff08;数据进入&#xff09; 和出栈&#xff08;数据出去&#xff09;均在栈顶操作。 常见栈的应用场景包括括号问题的求解&#xff0c;表达式的转换和求值&#…

运维知识点-Kubernetes_K8s

Kubernetes RBAC配置不当攻击场景攻击过程 RBAC配置不当 Service Account本质是服务账号&#xff0c;是Pod连接K8s集群的凭证。 在默认情况下&#xff0c;系统会为创建的Pod提供一个默认的Service Account&#xff0c; 用户也可以自定义Service Account&#xff0c;与Service…