vue3+element-plus实现日历组件农历显示且带列表数据
<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>{{ ("-").slice(2).join("-") }}</span>
<span class="marginL10">{{ solarToLunar(date, data) }}</span>
</el-col>
</el-row>
<template v-for="(item, index) in textContent()" :key="index">
<div v-for="(list, ind) in (0, 4)" :key="ind" class="paddingV5 item-list ellipsis">{{ }}</div>
<!-- 每个日期下面最多显示4条填报信息，超过4条显示分页 -->
<div v-if=" > 4" class="flex items-center justify-end">
<div class="marginR10 item-page">
<span style="color:#262626;">{{ }}</span>
<span style="color:#999;margin: 0 1px;">/</span>
<span style="color:#999;">{{ }}</span>
</div>
<div style="color:var(--fontColor);font-weight: 550;">
<span class="pointer marginR10" @="prevPage()"><</span>
<span class="pointer" @="nextPage()">></span>
</div>
</div>
</template>
</template>
</el-calendar>
</ELPlusLanguageConfig>
</template>
<script setup>
import {ref, reactive} from "vue";
import {useRouter} from "vue-router";
import ELPlusLanguageConfig from '@/components/ELPlusLanguageConfig'
import calendarUtils from '@/utils/calendar/calendar'
import useWeeks from '@/utils/useWeeks'
// 日历相关 start --------
const newData = ref(new Date())
let valueFormat = 'YYYY-MM'
const local = useWeeks(valueFormat);
const router = useRouter();
const props = defineProps({
showDialog:{
type:Boolean,
default:false
}
})
const form = ref();
const emit = defineEmits()
const doClose = () => {
emit('update:showDialog',false)
}
const goPage = (path,query = {}) => {
({
path,
query
})
}
const submit = () => {
emit('onSubmit',)
doClose()
}
const state = reactive({
//测试数据
calendarData: [
{
day: "2023-07-04",
list: [
{
name: '已填报单位名称1已填报单位名称1已填报单位名称1已填报单位名称1已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
}
],
currentPage: 1,
totalPage: 5,
},
{
day: "2023-07-05",
list: [
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
}
],
currentPage: 1,
totalPage: 5,
},
{
day: "2023-07-06",
list: [
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
}
],
currentPage: 1,
totalPage: 5,
},
{
day: "2023-07-07",
list: [
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
},
{
name: '已填报单位名称1'
}
],
currentPage: 1,
totalPage: 5,
},
],
});
const textContent = (date) => {
//当前date是拿到上面日历组件当前的日期值 根据该值去筛选测试数据找到对应各个日期下对应的数据return出去
return ((item) => {
return date === ;
});
}
// 公历转农历
const solarToLunar = (slotDate, slotData) => {
let solarDayArr = ('-');
let lunarDay = calendarUtils.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
// 农历日期
// let lunarMD = +
// 公历节日\农历节日\农历节气
// let festAndTerm = [];
// ( == null ? '' : ' ' + )
// ( == null ? '' : '' + )
// ( == null ? '' : '' + )
// festAndTerm = ('')
// return festAndTerm == '' ? lunarMD : festAndTerm
return
}
// 上一页
const prevPage = (day) => {
let calendarData = ;
for (let i = 0; i <; i++ ) {
let items = calendarData[i];
if ( == day) {
if ( === 1) {
= 1
} else {
--
}
}
}
}
// 下一页
const nextPage = (day) => {
let calendarData = ;
for (let i = 0; i <; i++ ) {
let items = calendarData[i];
if ( == day) {
if ( == ) {
=
} else {
++
}
}
}
}
</script>
<style scoped>
.view-btn>span{
padding:10px 20px;
background-color: rgb(248, 248, 248);
border: 1px solid rgb(203, 203, 203);
}
.view-btn>span:first-child{
border-radius: 5px 0 0 5px;
}
.view-btn>span:last-child{
border-radius: 0 5px 5px 0;
}
.view-btn>,.view-btn>span:hover{
background-color: rgb(0, 122, 251, 0.9);
color: #FFFFFF;
border: 1px solid rgb(0, 122, 251);
}
.item-list {
font-size: 0.75rem;
}
.item-page {
font-size: 0.75rem;
}
</style>