element-plus日历组件el-calendar自定义内容，每天绑定不同的值

效果


代码

<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-select
          v-model="calendarData[data.date]"
          placeholder=" "
          @change="handleChange"
        >
          <el-option
            v-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>