个人网站案例,网站微商城的建设运营实践和思考,江门网站推广多少钱,深圳动画设计制作哪些类型文章目录 需求分析1. 英文改为中文2. 修改样式3. 自定义头部4. 增删改功能接入需求
使用 ElementPlus中的 Calendar 组件完成自定义渲染
分析
1. 英文改为中文
转为中文的方式:用 ElementPlus的日历组件如何改为中文
2. 修改样式 附源码templateel-calendartemplateel-calendartemplate #date-cell="{ data }"el-row :class="data.isSelected ? 'is-selected' : 'sds'"{{ data.day.split('-').slice(1).join('-') }}{{ data.isSelected ? '✔️' : '' }}/el-rowdiv v-for="(item, index) in textContent(data.day)" :key="index"e-rowel-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-colel-col :span="1"/el-colel-col :span="6" class="tag2"span0/span/el-col/el-rowel-row v-elseel-col :span="17" class="tag"span当日限约/span/el-colel-col :span="1"/el-colel-col :span="6" class="tag2"span{{ item.xianyue }}/span/el-col/el-row/el-tag/el-col/e-rowel-rowstyle="margin-top: 10px"class="yuyue"v-if="item.yiyue item.sy == 0"el-col :span="11" class="center"span已约/spanspan class="center2" style=""0/span/el-colel-col :span="2" class="center"|/el-colel-col :span="11" class="center"span剩余/spanspan class="center2"0/span/el-col/el-rowel-row style="margin-top: 10px" class="yuyue" v-elseel-col :span="11" class="center"span已约/spanspan class="center2" style=""{{item.yiyue}}/span/el-colel-col :span="2" class="center"|/el-colel-col :span="11" class="center"span剩余/spanspan class="center2"{{ item.sy }}/span/el-col/el-row/div/template/el-calendar
/templatestyle
.is-selected {color: #1989fa;
}/stylestyle scoped :deep .el-calendar__body {