el-calendar如何修改每个格子的样式

对于el-calendar组件，你可以通过自定义样式或者使用插槽来修改每个格子的样式。

1. 自定义样式:
你可以通过给el-calendar的class或者设置scoped样式来修改每个格子的样式。例如，给el-calendar添加一个class名为"custom-calendar"，然后在样式中修改每个格子的样式：

<style scoped>
.custom-calendar .el-calendar__item {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  /* 其他样式修改 */
}
</style>

这样就可以修改每个格子的背景颜色、边框等样式。

2. 使用插槽:
el-calendar提供了几个插槽，你可以使用这些插槽来自定义每个格子的内容和样式。例如，使用`day-content`插槽来自定义每个日期格子的内容：

<el-calendar>
  <template #day-content="{ date }">
    <div class="custom-day">{{ date.getDate() }}</div>
  </template>
</el-calendar>

然后在样式中修改自定义的每个格子的样式：

<style scoped>
.custom-day {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  /* 其他样式修改 */
}
</style>

这样就可以修改每个格子的内容和样式。

希望对你有帮助！如果还有其他问题，请随时提问。