遇到一个酒店日历的需求,需要用周进行展示
拿到需求研究了一阵子,后端返回的数据不是自己想要的,开始使用了日历插件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 }
// })