背景
最近在寫項目的時候遇到了一個新的需求，就是需要生成一個以當(dāng)前月份日期時間為表頭的表格，用來展示這個月的值班情況
表格上方有切換月份的按鈕，切換對應(yīng)的月份，表頭要顯示對應(yīng)的月份的日期以及對應(yīng)月份下面的數(shù)據(jù)，沒有安排值班的日期，用/表示，屬于當(dāng)天的日期時間，將單元格的背景加深
大致的展示效果如下(數(shù)據(jù)為假數(shù)據(jù)，只是展示效果使用，具體的以實際為準):
實現(xiàn)思路
1.最開始的時候想到的是使用日歷插件fullCalendar去實現(xiàn)，但是實現(xiàn)出來的效果不是想要的效果，所以就pass掉了
2.然后就在網(wǎng)上看了一系列大家分享的文章，基本的實現(xiàn)思路有了，那么就是解決實現(xiàn)這一塊的問題了
3.時間日期為表頭這些數(shù)據(jù)是很好得到的，難點就在于我要怎么實現(xiàn)將后端傳過來的對應(yīng)的日期數(shù)據(jù)渲染至表格中，還有就是怎么實現(xiàn)對應(yīng)日期下面的表格操作
實現(xiàn)步驟
- 先計算出可供切換的年份和月份
//先得到當(dāng)前時間的年份和月份
//在data中定義
data() {
return {
time: {
year: new Date().getFullYear(),
month: new Date().getMonth()
},
}
},
//methods中寫上增加年份與月份的方法
methods:{
reduceMonth() {
if (this.time.month > 0) {
this.time.month = this.time.month - 1
} else {
this.time.month = 11
this.time.year = this.time.year - 1
}
},
addMonth() {
if (this.time.month < 11) {
this.time.month = this.time.month + 1
} else {
this.time.month = 0
this.time.year = this.time.year + 1
}
},
}
- 將得到數(shù)據(jù)與方法寫入對應(yīng)的樣式結(jié)構(gòu)中去
<!-- 月份 -->
<div class="month-con">
<i class="el-icon-arrow-left" @click="reduceMonth()" />
<i class="el-icon-arrow-right" @click="addMonth()" />
<span class="month">{{ month(time.month + 1) }}</span>
<span>{{ time.year }}</span>
</div>
-
切換月份與年份的就完成了，效果如圖
-
在計算得到當(dāng)月的日期數(shù)據(jù)作為表頭數(shù)據(jù)
//在這里主要使用的是計算屬性，利用計算屬性得到一個日期時間數(shù)組
//還是利用上面步驟中定義好的data數(shù)據(jù)，這里就不重復(fù)了
computed: {
// 獲取當(dāng)前月份時間日期
visibleCalendar: function () {
// 獲取今天的年月日
const today = new Date()
today.setHours(0)
today.setMinutes(0)
today.setSeconds(0)
today.setMilliseconds(0)
const calendarArr = []
// 獲取當(dāng)前月份第一天
const currentFirstDay = new Date(this.time.year, this.time.month, 1)
const d = new Date(this.time.year, this.time.month + 1, 0);
const currentMonthDay = d.getDate()
// 獲取第一天是周幾，注意周日的時候getDay()返回的是0，要做特殊處理
const weekDay = currentFirstDay.getDay() === 0 ? 7 : currentFirstDay.getDay()
// 以當(dāng)前月份的第一天作為第一天
const startDay = currentFirstDay.getTime()
// 利用當(dāng)前月份一共有多少天來顯示日歷表頭
for (let i = 0; i < currentMonthDay; i++) {
const date = new Date(startDay + i * 24 * 3600 * 1000)
// console.log(date,'date');
let Y = date.getFullYear() + "-";//年
let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";//月
let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "";//日
let nowDate = Y + M + D
calendarArr.push({
date: new Date(startDay + i * 24 * 3600 * 1000),
year: date.getFullYear(),
month: date.getMonth(),
week: this.getweekday(date),
day: date.getDate(),
keyDate: nowDate,
})
}
return calendarArr
}
},
- 得到表頭數(shù)據(jù)之后生成動態(tài)表頭
//在table中生成表頭
<el-table size="mini" border>
<el-table-column label="技術(shù)員" fixed="left" width="200px">
<template slot-scope="{row}">
<div>{{ row.name }}</div>
<div>手機號： {{ row.tel }}</div>
<div>郵箱： {{ row.email }}</div>
</template>
</el-table-column>
<el-table-column :label="item.day + '日' + '，' + item.week" v-for="item in visibleCalendar"
:key="item.keyDate" width="100">
<template slot-scope="{row}">
{{ row.dayData[item.keyDate].event }}
</template>
</el-table-column>
</el-table>
-
渲染完成之后的結(jié)構(gòu)如下，頁面多出的部分以滾動條的格式展現(xiàn)
-
到這里，頁面的基本樣式結(jié)構(gòu)已經(jīng)差不多得到了，下面就是要進行表格數(shù)據(jù)的處理，在這里與后端商量好你需要什么樣的數(shù)據(jù)格式，我這邊是直接說了我需要這種數(shù)據(jù)格式
{
"name": "zhangsan",
"tel": "133300008888",
"email": "zhangsan@163.com",
"dayData": {
"2023-05-25": {
"startTime": "2023-05-25 09:00:00",
"endTime": "2023-05-25 17:59:59",
"event": '值班'
},
"2023-05-22": {
"startTime": "2023-05-22 09:00:00",
"endTime": "2023-05-22 17:59:59",
"event": '值班'
},
"2023-05-21": {
"startTime": "2023-05-21 09:00:00",
"endTime": "2023-05-21 17:59:59",
"event": '值班'
}
}
},
- 得到數(shù)據(jù)之后在轉(zhuǎn)換成自己想要的數(shù)據(jù)格式，在這里我也是在
computed計算屬性里面進行轉(zhuǎn)換的，方法如下
//tableData就是得到的接口返回的數(shù)據(jù)
//tableOldData就是通過計算屬性得到的最終的渲染表格的數(shù)據(jù)集合
//visibleCalendar是在上一步驟中得到的日期時間集合
//keyDate是日期時間集合里面的一個字段，用來作為判斷依據(jù)的
tableOldData() {
const oldData = []
this.tableData.forEach(item => {
const newItem = { ...item }
const dayData = newItem.dayData
newItem.dayData = {}
this.visibleCalendar.forEach(date => {
let oldDate = date.keyDate
if (dayData[oldDate]) {
newItem.dayData[oldDate] = dayData[oldDate]
} else {
newItem.dayData[oldDate] = {}
}
})
oldData.push(newItem)
})
return oldData
},
- 再將得到的日期數(shù)據(jù)渲染至表格中，就可以得到一張以日期時間為表頭的動態(tài)表格了
總結(jié)
在這里主要是介紹如何生成以日期和時間為表頭的動態(tài)表格，并且能夠?qū)?shù)據(jù)渲染到表格中去，涉及到表格里面的一些操作，下篇文章進行介紹~文章來源：http://www.zghlxwxcb.cn/news/detail-719455.html
日期時間方法參考博文 教你從零寫vue日歷組件文章來源地址http://www.zghlxwxcb.cn/news/detail-719455.html
到了這里，關(guān)于vue+element ui生成以當(dāng)月日期時間為表頭的table表格的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
