Vue前端以日历的方式展示月报表示例

最新推荐文章于 2025-07-17 13:50:03 发布

原创

最新推荐文章于 2025-07-17 13:50:03 发布 · 8.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#日历形式显示月报表 #二维数组

本文展示了如何使用Vue在前端以日历的形式展示月报表，详细讲解了前端代码实现，包括组件结构和样式设计。同时，文章还提到了后台返回的数据格式，以及controller和服务层的代码处理，为实现日历月报表提供了完整的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Vue前端以日历的方式展示月报表，如下图
这里写图片描述

2、前端代码如下：

<template>

<div>
  <div style="width:100%;height:48px;">
   <div id="transparent-header" class="rank-head container" style="background: rgb(14,53,108);">
      <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/>

        <span style="margin-right:20px;">月报表</span>
        </div>
   </div>

   <div style="width:100%;height:40px;padding-top:0px;">

<div style="width:49%;height:100%;float:left;">
    <datepicker v-on:picked="picked" style="margin-left:10px;">
    </datepicker>
</div>

<div style="width:49%;height:100%;float:left;">

</div>

</div>


<div style="width:100%;height:578px;border:1px solid rgb(204,204,204);background:rgb(255,255,255);">

    <table cellpadding="0" cellspacing="0" id="1">
     <tr>
         <td>
            <div id="cal">
              <div id="top">
            </div>

         <ul id="wk">
            <li><b>日</b></li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li><b>六</b></li>
          </ul>

        <ul id="wk" v-for="item in dayFreezeData">
        <li v-if="item[0].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{
   
   {
   
   item[0].day}}</span>&nbsp;<p style="position:absolute;left:12px;top:18px;">{
   
   {
   
   item[0].num}}</p>
        </li>
        <li v-else >&nbsp;</li>
        <li v-if="item[1].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{
   
   {
   
   item[1].day}}</span>&nbsp;<p style="position:absolute;left:12px;top:18px;">{
   
   {
   
   item[1].num}}</p></li>
        <li v-else>&nbsp;  </li>

        <li v-if="item[2].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{
   
   {
   
   item[2].day}}</span>&nbsp;<p style="position:absolute;left:12px;top:18px;">{
   
   {
   
   item[2].num}}</p></li>
        <li v-else> &nbsp;</li>

        <li v-if="item[3].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{
   
   {
   
   item[3].day}}</span>&nbsp;<p style="position:absolute;left:12px;top:18px;">

                                {
   
   {
   
   item[3].num}}</p></