用 ElementPlus 的日历组件 Calendar 自定义渲染

文章目录

- 需求
- 分析
- - 1. 英文改为中文
  - 2. 修改样式
  - 3. 自定义头部
  - 4. 增删改功能接入

需求

使用 ElementPlus中的 Calendar 组件完成自定义渲染

分析

1. 英文改为中文

转为中文的方式：用 ElementPlus的日历组件如何改为中文

2. 修改样式

在这里插入图片描述

附源码

<template><el-calendar><template #date-cell="{ data }"><el-row :class="data.isSelected ? 'is-selected' : 'sds'">{{ data.day.split('-').slice(1).join('-') }}{{ data.isSelected ? '✔️' : '' }}</el-row><div v-for="(item, index) in textContent(data.day)" :key="index"><e-row><el-col class="center"><el-tag type="warning" class="tag"><el-row v-if="item.xianyue == 0"><el-col :span="17" class="tag"><span>当日限约</span></el-col><el-col :span="1"></el-col><el-col :span="6" class="tag2"><span>0</span></el-col></el-row><el-row v-else><el-col :span="17" class="tag"><span>当日限约</span></el-col><el-col :span="1"></el-col><el-col :span="6" class="tag2"><span>{{ item.xianyue }}</span></el-col></el-row></el-tag></el-col></e-row><el-rowstyle="margin-top: 10px"class="yuyue"v-if="item.yiyue && item.sy == 0"><el-col :span="11" class="center"><span>已约</span><span class="center2" style="">0</span></el-col><el-col :span="2" class="center">|</el-col><el-col :span="11" class="center"><span>剩余</span><span class="center2">0</span></el-col></el-row><el-row style="margin-top: 10px" class="yuyue" v-else><el-col :span="11" class="center"><span>已约</span><span class="center2" style="">{{item.yiyue}}</span></el-col><el-col :span="2" class="center">|</el-col><el-col :span="11" class="center"><span>剩余</span><span class="center2">{{ item.sy }}</span></el-col></el-row></div></template></el-calendar>
</template><style>
.is-selected {color: #1989fa;
}</style><style scoped >:deep .el-calendar__body {