位置: IT常识 - 正文
基于elementui的工作日，休息日的日历组件(elementui能做什么)
发布时间：2023-12-27基于elementui的工作日，休息日的日历组件 基于elementui的工作日，休息日的日历组件功能要求DatePicker 日期选择器国际化周六，周日所在列背景颜色修改添加节假日，工作日代码功能要求
本文链接地址:https://www.jiuchutong.com/zhishi/279793.html
转载请保留说明！
推荐整理分享基于elementui的工作日，休息日的日历组件(elementui能做什么)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:elementui的优缺点,elementui案例,elementui基于vue,elementui能做什么,elementui的优缺点,elementui的优缺点,elementui的优缺点,elementui基于vue,内容如对您有帮助，希望把文章链接给更多的朋友！
在这里插入图片描述，如图要求做一个可以显示休息日和工作日的组件。我基于element-ui已有的组件进行修改。
DatePicker 日期选择器以”日“为基本单位，基础的日期选择控件。
国际化使用element-ui的国际化功能将星期一到星期日设置为中文 在vue组件里面引入el-date-picker 得到中文配置的容=日期选择器
周六，周日所在列背景颜色修改打开控制台查看周一到周日的样式 然后我们修改组件的样式 得到如图效果：
添加节假日，工作日使用element-ui的自定义功能 我们稍加修改 此时已经能展示休息日了，在实际开发中，休息日的数组可以由后端返回，以及工作日的数组。
代码<template> <div> <el-date-picker v-model="value1" type="date" placeholder="Pick a day" :size="size" > <template #default="cell"> <div class="cell" :class="{ current: cell.isCurrent }"> <span class="text">{{ cell.text }}</span> <span v-if="isHoliday(cell)" class="holiday">休</span> </div> </template> </el-date-picker> </div></template><script setup lang='ts'>import { ref } from 'vue'// 类型学习const value1 = ref(null)const size = ref<'default' | 'large' | 'small'>('default')const a = ref<string>('inint')console.log(a.value, 'a------')a.value = 'zhangsan'console.log(a.value, 'a------')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 >.el-date-table th:nth-child(n+7){background-color: #c0c0c0}.el-date-table th:nth-child(1){background-color: #c0c0c0}.holiday{ position: absolute; top: -7px; left: 14px;}.el-date-table td:nth-child(n+7){background-color: #c0c0c0}.el-date-table td:nth-child(1){background-color: #c0c0c0}</style>上一篇：win11系统怎么删除此电脑里的百度网盘图标? 百度网盘的删除方法(win11系统怎么删除账户)
下一篇：aspnet_admin.exe进程是安全的吗 aspnet_admin进程信息查询
