element-plus日历(Calendar)动态渲染+避坑指南
指南 动态 渲染 Plus Element 日历 calendar 避坑
2023-06-13 09:13:11 时间
效果图
实战代码
<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-row
style="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 {
padding: 4px 20px 35px;
}
:deep .el-calendar-table thead th {
color: #ffab11;
font-weight: bold;
font-size: 25px;
}
.tag {
display: flex;
align-items: center;
height: 2.5vh;
justify-content: center;
}
.tag2 {
display: flex;
align-items: center;
height: 2.5vh;
justify-content: center;
font-size: 18px;
}
.aaa .is-selected .yuyue {
color: #ffab11;
}
.aaa .datastyle {
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
color: #353636;
font-weight: 600;
}
:deep .el-calendar-table .el-calendar-day:hover {
background-color: #faecd8;
}
:deep .el-calendar {
--el-calendar-selected-bg-color: #faecd8;
}
.aaa .is-selected .datastyle {
color: #ffab11;
}
.aaa .prev .datastyle {
color: #c4c5c8;
}
.aaa .next .datastyle {
color: #c4c5c8;
}
:deep .el-calendar {
--el-calendar-cell-width: 130px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.center2 {
display: flex;
justify-content: center;
align-items: center;
color: #ffab11;
margin-left: 5px;
font-size: 20px;
}
:deep .el-calendar__header {
justify-content: center;
}
</style>
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const state = reactive({
tableData: [],
//测试数据
calendarData: [
{
day: "2022-11-04",
xianyue: 400,
yiyue: 5,
sy: 1,
},
{
day: "2022-11-05",
xianyue: 500,
yiyue: 5,
sy: 1,
},
{
day: "2022-11-06",
xianyue: 200,
yiyue: 5,
sy: 1,
},
{
day: "2022-11-07",
xianyue: 0,
yiyue: 0,
sy: 0,
},
],
});
//处理日期获取后台数据动态渲染上去
const textContent = (date) => {
//当前date是拿到上面日历组件当前的日期值 根据该值去筛选测试数据找到对应各个日期下对应的数据return出去
console.log(date, 1111);
return state.calendarData.filter((item) => {
return date === item.day;
});
};
</script>
避坑-插槽不生效
#dateCell 驼峰书写
相关文章
- 《DAX进阶指南》-第6章 动态可视化
- go 简单部署 chatgpt 指南
- Tina_Linux_系统软件 开发指南
- 设置MySQL连接超时时间的指南(mysql连接超时时间)
- Linux动态库调用实践指南(linux动态库调用)
- 建立Linux下QT动态库建立快速指南(linux下qt动态库)
- 优化极速提升:Redis 架构优化指南(redis架构)
- 「Linux系统挂载NAS存储设备的快速指南」(linux挂载nas存储)
- Linux查看动态库:一步步操作指南(linux查看动态库)
- Oracle查询告警日志:攻略指南(oracle查看告警日志)
- 暴雨、洪水后传染病风险防范指南
- 安装Redis:简单步骤指南(如何安装redis)
- Linux U盘启动系统安装指南(linuxu盘系统下载)
- Ubuntu离线环境下MySQL安装指南(ubuntu离线安装mysql)
- ;动态SQL Server动态端口调整实施指南(sqlserver端口)
- Linux下使用串口模式的快速指南(linux串口模式)
- MySQL数据导入:一步一步指南(数据导入mysql)
- 优化Oracle实例内存优化实践指南(oracle实例的内存)
- Linux快速访问指南(linux访问linux)
- 代码Oracle数据库实现分页技术的指南(oracle写分页)
- 使用Oracle Q快速操作指南(oracle q 操作)
- Linux 日常系统巡检指南(linux日常巡检)
- Linux U盘启动盘制作指南(制作linuxu盘启动盘)
- MySQL的入门指南:从零开始(r ?? mysql)
- Oracle数据库中编程数据类型指南(oracle中编数据类型)
- 在Oracle数据库中新建字段一步一步操作指南(oracle中新建字段)
- Oracle 9IAS安装过程步骤指南(oracle9ias安装)
- Oracle 10驱动程序安装指南(oracle10驱动安装)