vue3+element-plus实现日历组件农历显示且带列表数据

说学逗唱攻城狮

已于 2023-07-07 10:37:17 修改

阅读量5.4k

点赞数 5

文章标签： element-plus 日历

于 2023-07-07 10:28:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34720531/article/details/131590437

版权

在这里插入图片描述
calendar.js
https://gitee.com/mirrors/calendar-js.git 这个js可以去下载，里面涉及的有点多

要设置日历每周以周一开始，需要在main.js中加入这一行代码
在这里插入图片描述

import 'dayjs/locale/zh-cn'; // 设置日历每周从周一开始

<template>
 <ELPlusLanguageConfig :local="local">
	<el-calendar v-model="newData" class="dialog-calendar">
	 <template #header="{ date }">
	     <div class="font18" style="color: var(--color6)">{
   {
    date }}</div>
	     <div class="view-btn">
	       <span class="pointer active">单期查看</span>
	       <span @click="goPage('/DataWrite/DataEditCompare',{id:123,c:true})" class="pointer">
	         对比查看
	       </span>
	     </div>
	 </template>
	 <template #dateCell="{ date, data }">
	   <el-row>
	     <el-col class="datastyle">
	       <span>{
   {
    data.day.split("-").slice(2).join("-") }}</span>
	       <span class="marginL10">{
   {
    solarToLunar(date, data) }}</span>
	     </el-col>
	   </el-row>
	   <template v-for="(item, index) in textContent(data.day)" :key="index">
	     <div v-for="(list, ind) in item.list.slice(0, 4)" :key="ind" class="paddingV5 item-list ellipsis">{
   {
    list.name }}</div>
	     <!-- 每个日期下面最多显示4条填报信息，超过4条显示分页 -->
	     <div v-if="item.list.length > 4" class="flex items-center justify-end">
	       <div class="marginR10 item-page">
	         <span styl