在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中。这样，当日历渲染时，每一个格子都会显示对应的值。