在Element UI中，可以通过自定义内容的方式来定制Calendar组件的显示格式。以下是一个简单的例子，展示如何定制Calendar的日期格式：
<template>
<el-calendar :range="range" :first-day-of-week="1" :format="format">
<template #dateCell="{date, data}">
<div class="custom-date-content">
{{ data.day.split('-').slice(2).join('-') }}
</div>
</template>
</el-calendar>
</template>
<script>
export default {
data() {
return {
range: [],
format: {
// 自定义日期格式
// 这里的例子将日期格式定制为YYYY-MM-DD
// 注意：Element UI的Calendar组件内部使用的是日期对象，所以这里的格式化主要是为了展示
// 如果需要进行日期计算，请使用日期对象而非字符串
// 日期格式化函数
// date: 日期对象
// return: 格式化后的字符串
// 这里的例子简单地返回了日期的字符串格式
stringify: (date) => {
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
}
}
};
}
};
</script>
<style>
.custom-date-content {
text-align: center;
height: 40px;
line-height: 40px;
}
</style>在这个例子中，我们定义了一个format对象，其中stringify函数负责将日期对象格式化为字符串。在<template #dateCell>内部，我们使用了一个自定义的div来展示日期，并通过data.day获取日期字符串，然后切片和拼接成YYYY-MM-DD的格式。这样，Calendar组件就会根据我们的自定义格式来显示日期。