vue el-table简单的日期价格表

本文介绍了如何处理后端返回的酒店房间数据,通过JavaScript和FullCalendar插件实现周视图展示。首先,对原始数据进行处理,将房型属性赋值给每个房间,然后组合成新数组。接着,添加日期的周几信息,并通过自定义方法合并相同房型的表头。最后,利用el-table进行渲染,实现动态表头和数据展示。

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

遇到一个酒店日历的需求,需要用周进行展示

拿到需求研究了一阵子,后端返回的数据不是自己想要的,开始使用了日历插件fullcalendar,做了几天后,发现想要达到需求很麻烦,越写越复杂,就回头来重新进行。

  • 效果图

在这里插入图片描述

后端返回的初始数据
在这里插入图片描述

  • 我需要拿到所有的room_list组成的数组用于el-table展示,先将房型的属性赋值给每个房间,再将其组装为新数组
this.roomInfo.forEach(item => {
            item.room_list.forEach(value => {
              value.parentId = item.room_type_id
              value.parentName = item.room_type_name
            })
          })
this.textList = this.queryList(this.roomInfo.map(a => a.room_list))
queryList (res) {
      let list = res
      let roomtext = []
      for (let i = 0; i < list.length; i++) {
        roomtext = roomtext.concat(list[i])
      }
      return roomtext
    },
  • 通过打印数据可以看到第一步已经完成
    在这里插入图片描述

  • 由于初始数据返回了具体日期,我可以根据日期给其加上周几,用于表格列展示

//给日期加上周几
    getWeekDay (date) {
      var week;
      if (date.getDay() == 0) week = "周日"
      if (date.getDay() == 1) week = "周一"
      if (date.getDay() == 2) week = "周二"
      if (date.getDay() == 3) week = "周三"
      if (date.getDay() == 4) week = "周四"
      if (date.getDay() == 5) week = "周五"
      if (date.getDay() == 6) week = "周六"
      return week
    },
    //给数组添加新的属性
    dataDateChange (dateStr) {
      var handData = dateStr
      for (var i = 0; i < handData.length; i++) {
        var weekStr = this.getWeekDay(new Date(handData[i].date))
        handData[i].key = weekStr
      }
      return handData
    },
  • 得到如下数组
    在这里插入图片描述
    再使用通过el-table提供的合并表头方法合并相同房型
    在这里插入图片描述
//this.textList = this.firstQueryList(this.textList)

firstQueryList (res) {
      let list = res
      let roomtext = []
      //获取所有计划
      for (let i = 0; i < list.length; i++) {
        roomtext = roomtext.concat(list[i])
      }
      //处理数据,合并相同房型
      this.spanArr = []
      for (var i = 0; i < roomtext.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (roomtext[i].parentId === roomtext[i - 1].parentId) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
      return roomtext;
    },
    //合并相同房型
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
  • 据都已经取到,直接绑定表格渲染数据,当前效果图

在这里插入图片描述

  1. table表头绑定动态数据
 <el-table-column v-for="(item,index) in roomList" :key="index" 
:label="item.date + ' ' + item.week" min-width="80" align="center">
            <template slot-scope="scope">
              <div v-for="(i,index) in scope.row.details" :key="index">
                <div v-if="i.key == item.week" @click="clickDialog(i)">
                  <span> ¥{{i.price }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

//this.roomList = this.textList[0].details.map(item => {
// return { date: item.date, week: item.key }
// })
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值