效果


代码

<template><el-calendar v-model="calendarDate"><template #date-cell="{ data }"><p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split("-").slice(1).join("-") }}{{ data.isSelected ? "✔️" : "" }}</p><div><el-selectv-model="calendarData[data.date]"placeholder=" "@change="handleChange"><el-optionv-for="(item, index) in ['白', '休', '值']":key="index":label="item":value="item"></el-option></el-select></div></template></el-calendar>
</template>
<script setup>
// 日历
const calendarDate = ref(new Date());
const calendarData = ref({});
const handleChange = (value: string, date: string) => {// 格式化日期const formattedCalendarData = Object.keys(calendarData.value).reduce((acc, date) => {const d = new Date(date);const year = d.getFullYear();const month = ("0" + (d.getMonth() + 1)).slice(-2);const day = ("0" + d.getDate()).slice(-2);const formattedDate = `${year}-${month}-${day}`;acc[formattedDate] = calendarData.value[date];return acc;},{});console.log("格式化后的值", formattedCalendarData);
};
</script>