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

最新推荐文章于 2024-12-20 15:21:57 发布

原创最新推荐文章于 2024-12-20 15:21:57 发布 · 888 阅读

CC 4.0 BY-SA版权

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

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

拿到需求研究了一阵子，后端返回的数据不是自己想要的，开始使用了日历插件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
        }
      }
    },

据都已经取到，直接绑定表格渲染数据，当前效果图

在这里插入图片描述

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