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

在Element Plus中，你可以使用dateCell属性来自定义日历中每一个日期格的内容。以下是一个简单的例子，展示如何根据每一天绑定不同的值：

<template>
  <el-calendar :date-cell-class-name-list="dateClass" :date-cell-content="dateCellContent" />
</template>
 
<script>
export default {
  data() {
    return {
      dateClass: [],
      valueMap: {} // 用于存储日期对应的值
    };
  },
  methods: {
    dateCellContent({ date, data }) {
      const value = this.valueMap[date.toDateString()] || '--';
      return `<div class="custom-content">${value}</div>`;
    }
  },
  mounted() {
    const now = new Date();
    for (let i = 0; i < 10; i++) {
      const date = new Date(now.getFullYear(), now.getMonth(), now.getDate() + i);
      this.valueMap[date.toDateString()] = `Value ${i + 1}`; // 为当前日期绑定不同的值
    }
  }
};
</script>
 
<style>
.custom-content {
  text-align: center;
  height: 100%;
}
</style>

在这个例子中，我们定义了一个方法dateCellContent，该方法接收一个对象{ date, data }，其中date是当前格子代表的日期，我们可以通过这个日期去valueMap中查找对应的值。如果找到了，就返回一个包含这个值的HTML字符串；如果没有找到，就返回一个默认的字符串，例如'--'。

在mounted钩子中，我们为接下来10天的日期绑定了不同的值，并将它们存储在valueMap中。这样，当日历渲染时，每一个格子都会显示对应的值。