element-plus日历(Calendar)动态渲染+避坑指南

效果图

在这里插入图片描述
实战代码

  
    
      
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
      
      
                
                  
                    
                      
                        
                          当日限约
                        
                        
                        
                          0
                        
                      
                      
                        
                          当日限约
                        
                        
                        
                          {{ item.xianyue }}
                        
                      
                    
                  
                
                
                  
                    已约0
                  |
                  
                    剩余0
                
                
                  
                    已约{{
                      item.yiyue
                    }}
                  |
                  
                    剩余{{ item.sy }}
                
              

    
  



.is-selected {
  color: #1989fa;
}
  
  



 
: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;
}



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;
        });
      };