MecuryJerry
2021-09-22 15:31
采纳率: 100%
浏览 42
已结题

使用el-table和v-for自己封装一个日历组件,如何实现?

想用el-table封装一个简单日历组件,像这样即可

img

后端给的数据格式大概就这样,数组里的一个对象对应一个单元格里的数据,请问该怎么实现?如果不好实现的话用原生表格怎么实现?

calendarData: [
        {
          "month": "2021-08",
          "day": 30,
          "week": 1,
          "job": 5,
          "currentMonth": -1
        },
        {
          "month": "2021-08",
          "day": 31,
          "week": 2,
          "job": 5,
          "currentMonth": -1
        },
        {
          "month": "2021-09",
          "day": 1,
          "week": 3,
          "job": 5,
          "currentMonth": 0
        },

      ],
  • 收藏

5条回答 默认 最新

  • tonyzhangcn 2021-09-22 21:40
    已采纳

    先把数据弄成el-table需要的结构吧。

    //例如原始数据如下
    let data = [
      {
        "month": "2021-08",
        "day": 30,
        "week": 1,
        "job": 5,
        "currentMonth": -1
      },
      {
        "month": "2021-08",
        "day": 31,
        "week": 2,
        "job": 5,
        "currentMonth": -1
      },
      {
        "month": "2021-09",
        "day": 1,
        "week": 3,
        "job": 2,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 2,
        "week": 4,
        "job": 4,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 3,
        "week": 5,
        "job": 8,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 4,
        "week": 6,
        "job": 3,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 5,
        "week": 0,
        "job": 9,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 6,
        "week": 1,
        "job": 1,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 7,
        "week": 2,
        "job": 6,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 8,
        "week": 3,
        "job": 5,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 9,
        "week": 4,
        "job": 6,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 10,
        "week": 5,
        "job": 9,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 11,
        "week": 6,
        "job": 7,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 12,
        "week": 0,
        "job": 2,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 13,
        "week": 1,
        "job": 2,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 14,
        "week": 2,
        "job": 3,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 15,
        "week": 3,
        "job": 5,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 16,
        "week": 4,
        "job": 2,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 17,
        "week": 5,
        "job": 5,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 18,
        "week": 6,
        "job": 4,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 19,
        "week": 0,
        "job": 2,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 20,
        "week": 1,
        "job": 1,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 21,
        "week": 2,
        "job": 8,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 22,
        "week": 3,
        "job": 10,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 23,
        "week": 4,
        "job": 3,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 24,
        "week": 5,
        "job": 7,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 25,
        "week": 6,
        "job": 10,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 26,
        "week": 0,
        "job": 6,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 27,
        "week": 1,
        "job": 4,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 28,
        "week": 2,
        "job": 2,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 29,
        "week": 3,
        "job": 4,
        "currentMonth": 0
      },
      {
        "month": "2021-09",
        "day": 30,
        "week": 4,
        "job": 10,
        "currentMonth": 0
      },
      {
        "month": "2021-10",
        "day": 1,
        "week": 5,
        "job": 9,
        "currentMonth": 1
      },
      {
        "month": "2021-10",
        "day": 2,
        "week": 6,
        "job": 5,
        "currentMonth": 1
      },
      {
        "month": "2021-10",
        "day": 3,
        "week": 0,
        "job": 8,
        "currentMonth": 1
      },
      {
        "month": "2021-10",
        "day": 4,
        "week": 1,
        "job": 7,
        "currentMonth": 1
      },
      {
        "month": "2021-10",
        "day": 5,
        "week": 2,
        "job": 3,
        "currentMonth": 1
      },
      {
        "month": "2021-10",
        "day": 6,
        "week": 3,
        "job": 9,
        "currentMonth": 1
      },
      {
        "month": "2021-10",
        "day": 7,
        "week": 4,
        "job": 4,
        "currentMonth": 1
      },
      {
        "month": "2021-10",
        "day": 8,
        "week": 5,
        "job": 10,
        "currentMonth": 1
      },
      {
        "month": "2021-10",
        "day": 9,
        "week": 6,
        "job": 1,
        "currentMonth": 1
      },
      {
        "month": "2021-10",
        "day": 10,
        "week": 0,
        "job": 1,
        "currentMonth": 1
      }
    ]
    
    

    接下来把他转成6条数组(对应6行)

    let data2 = JSON.parse(JSON.stringify(data));
    let table_data=[];
    for(i=0;i<6;i++){table_data.push(data2.splice(0,7))};
    
    //把每一行对应到星期一到星期日的对象
    let map1 = ['xqr','xqy','xqe','xqs','xqsi','xqw','xql'];
    let result=[];
    for(i=0;i<table_data.length;i++){
        temp={};
        for(j=0;j<table_data[i].length;j++){
          temp[map1[table_data[i][j].week]]=table_data[i][j]; 
        }
        result.push(temp);
    }
    

    让后把数据套到el-table里

    <template>
            <el-table
          :data="result"
          style="width: 100%">
          <el-table-column
            prop="xqy.day"
            label="星期一"
            width="180">
          </el-table-column>
          <el-table-column
            prop="xqe.day"
            label="星期二"
            width="180">
          </el-table-column>
          <el-table-column
            prop="xqs.day"
            label="星期三">
          </el-table-column>
              <el-table-column
            prop="xqsi.day"
            label="星期四">
          </el-table-column>
              <el-table-column
            prop="xqw.day"
            label="星期五">
          </el-table-column>
              <el-table-column
            prop="xql.day"
            label="星期六">
          </el-table-column>
              <el-table-column
            prop="xqr.day"
            label="星期日">
          </el-table-column>
        </el-table>
      </template>
    
    

    下面是显示效果,你自己调一下样式吧.

    img

    打赏 评论
  • MecuryJerry 2021-09-22 15:32

    需要一个6行7列的表格

    打赏 评论
  • angula_ 2021-09-22 15:35

    设置好表格,将后端请求回来的数据填充进去,设置点击选中样式

    打赏 评论
  • tonyzhangcn 2021-09-22 15:49

    没必要自己实现吧?这玩意儿有那么多现成的,需要考虑的细节还是很多的,要做完美了没那么轻松。
    建议使用element UI的,试着根据自己的需要定制一下吧。

    打赏 评论
  • tonyzhangcn 2021-09-23 09:08

    能行了吗?

    打赏 评论

相关推荐 更多相似问题