Avue和Element-UI動(dòng)態(tài)三級(jí)表頭的實(shí)現(xiàn)
更新時(shí)間：2022年07月21日 17:02:00 作者：不一般的菜瓜
本文主要介紹了Avue和Element-UI動(dòng)態(tài)三級(jí)表頭的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
需求場(chǎng)景： 業(yè)務(wù)方希望有表格可以體現(xiàn)員工的考勤信息，要具體到上午下午，統(tǒng)計(jì)司機(jī)上下班打卡所產(chǎn)生的數(shù)據(jù)。產(chǎn)品提出想做成三級(jí)表頭根據(jù)頁(yè)面查詢(xún)條件的年月去動(dòng)態(tài)生成表格的表頭。三級(jí)分別是月份日期，對(duì)應(yīng)的星期，以及每天的上午以及下午。
效果如下：
Avue配置方式
通過(guò)對(duì)avue-crud組件的option的配置如下：
{
label: `${$this.month}月${$this.dateList[0].ri}日`, // 月份
headerAlign: 'center',
children: [
{
label: `星期${$this.dateList[0].xq}`,
headerAlign: 'center',
children: [
{
label: '上午',
prop: 'oneAmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.oneAmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
},
{
label: '下午',
prop: 'onePmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.onePmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
}
]
}
]
},
在data中聲明需要的變量以及獲取每個(gè)月天數(shù)以及對(duì)應(yīng)星期的方法
data(){
return {
dateList: [], // 日期list
month: 0, // 選中的月份
dayNum: 0 // 選中月的天數(shù)
}
}
created(){
this.montInfo(GetYearLastMonth())
// 當(dāng)前月的天數(shù)
const arr = GetYearLastMonth().split('-')
this.month = parseInt(arr[1])
this.dayNum = this.dayNumFn(parseInt(arr[0]), parseInt(arr[1]))
}
methods(){
// 月日以及對(duì)應(yīng)的星期
montInfo(res) {
/**
* 獲取一個(gè)月多少天，并獲取月初星期幾
*/
const daxier = ['一', '二', '三', '四', '五', '六', '日'];
const date = res ? new Date(res) : new Date()
const y = date.getFullYear()
const m = date.getMonth() + 1
var date2 = new Date(y, m, 0)
var rq = date2.getDate() // 日 本月最后一天
var xq = date2.getDay(); // 星期 本月第一天星期幾 new Date(0).getDay()
var rq2 = rq % 7
if (rq2 === 0) {
xq = rq2 + 1
} else {
if (rq2 > xq) xq += 7
xq = xq - rq2
}
var data = [];
for (var i = 1; i <= rq; i++) {
data.push({
'ri': i,
'xq': daxier[xq]
})
xq = (++xq === 7) ? 0 : xq
}
this.dateList = data
},
// 獲取選中月的天數(shù)
dayNumFn(year, month) {
return new Date(year, month, 0).getDate()
},
}
根據(jù)查詢(xún)條件去切換表頭
{
label: '年月',
search: true,
hide: true,
searchPlaceholder: '請(qǐng)選擇年月',
searchClearable: false,
prop: 'yearMonth',
type: 'month',
// 日期組件格式化
format: 'yyyy-MM', // 展示值
// 單元格格式化
valueFormat: 'yyyy-MM', // value
searchDefault: GetYearLastMonth(),
pickerOptions: {
disabledDate: (time) => {
return time.getTime() > new Date(GetYearLastMonth()).getTime()
}
},
// 查詢(xún)條件月份切換的同事重新渲染表頭
change(value) {
// 當(dāng)前月的天數(shù)
$this.montInfo(value.value)
const arr = value.value.split('-')
$this.month = parseInt(arr[1])
$this.dayNum = $this.dayNumFn(parseInt(arr[0]), parseInt(arr[1]))
}
},
因?yàn)椴煌脑路萑掌谟胁煌?，比?月只有28天而1月有31天。所以大于28的日期需要單獨(dú)處理一下
{
label: $this.dayNum > 28 ? `${$this.month}月${$this.dateList[28].ri}日` : '',
headerAlign: 'center',
hide: $this.dayNum < 28,
children: [
{
label: $this.dayNum > 28 ? `星期${$this.dateList[28].xq}` : '',
headerAlign: 'center',
children: [
{
label: '上午',
prop: 'twentyNineAmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.twentyNineAmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
},
{
label: '下午',
prop: 'twentyNinePmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.twentyNinePmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
}
]
}
]
},
{
label: $this.dayNum > 28 ? `${$this.month}月${$this.dateList[29].ri}日` : '',
headerAlign: 'center',
hide: $this.dayNum < 30,
children: [
{
label: $this.dayNum > 28 ? `星期${$this.dateList[29].xq}` : '',
headerAlign: 'center',
children: [
{
label: '上午',
prop: 'thirtyAmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.thirtyAmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
},
{
label: '下午',
prop: 'thirtyPmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.thirtyPmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
}
]
}
]
},
{
label: $this.dayNum === 31 ? `${$this.month}月${$this.dateList[30].ri}日` : '',
headerAlign: 'center',
hide: $this.dayNum !== 31,
children: [
{
label: $this.dayNum === 31 ? `星期${$this.dateList[30].xq}` : '',
headerAlign: 'center',
children: [
{
label: '上午',
prop: 'thirtyOneAmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.thirtyOneAmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
},
{
label: '下午',
prop: 'thirtyOnePmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.thirtyOnePmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
}
]
}
]
},
Element-UI三級(jí)表頭動(dòng)態(tài)寫(xiě)法
element-ui的寫(xiě)法相對(duì)簡(jiǎn)單一些，因?yàn)榕渲庙?xiàng)沒(méi)辦法進(jìn)行遍歷渲染。
template里面的寫(xiě)法
<el-table
:data="tableData"
style="width: 100%" >
<el-table-column
prop="month"
label="月份"
width="150"
header-align="center">
</el-table-column>
<!-- 這里使用遍歷的形式來(lái)進(jìn)行渲染 -->
<template v-for="(item,index) in dateList" >
<el-table-column :label="`${month}月${item.ri}日`" header-align="center" :key="'date' + index">
<el-table-column header-align="center" :label="`星期${item.xq}`" >
<el-table-column header-align="center" :prop="item.sw" label="上午" width="120" ></el-table-column>
<el-table-column header-align="center" :prop="item.xw" label="下午" width="120" ></el-table-column>
</el-table-column>
</el-table-column>
</template>
</el-table>
data中還是聲明變量，methods中還是應(yīng)用和上面類(lèi)似的方法
data(){
return {
dateList: [], // 日期list
month: 0, // 選中的月份
dayNum: 0, // 選中月的天數(shù)
}
}
created() {
this.montInfo(GetYearLastMonth())
// 當(dāng)前月的天數(shù)
const arr = GetYearLastMonth().split('-')
this.month = parseInt(arr[1])
this.dayNum = this.dayNumFn(parseInt(arr[0]), parseInt(arr[1]))
},
methods: {
// 月日以及對(duì)應(yīng)的星期
montInfo(res) {
/**
* 獲取一個(gè)月多少天，并獲取月初星期幾
*/
const daxier = ['一', '二', '三', '四', '五', '六', '日'];
// 這里是每個(gè)上午下午展示為不同的變量
const amArr = ['oneAmAttendance', 'twoAmAttendance', 'threeAmAttendance', 'fourAmAttendance', 'fiveAmAttendance', 'sixAmAttendance', 'sevenAmAttendance', 'eightAmAttendance', 'nineAmAttendance', 'tenAmAttendance', 'elevenAmAttendance', 'twelveAmAttendance', 'thirteenAmAttendance', 'fourteenAmAttendance', 'fifteenAmAttendance', 'oneAmAttendance', 'twoAmAttendance', 'threeAmAttendance', 'fourAmAttendance', 'fiveAmAttendance', 'sixAmAttendance', 'sevenAmAttendance', 'eightAmAttendance', 'nineAmAttendance', 'tenAmAttendance', 'elevenAmAttendance', 'twelveAmAttendance', 'thirteenAmAttendance', 'fourteenAmAttendance', 'fifteenAmAttendance', 'sixteenAmAttendance', 'seventeenAmAttendance', 'eighteenAmAttendance', 'nineteenAmAttendance', 'twentyAmAttendance', 'twentyOneAmAttendance', 'twentyTwoAmAttendance', 'twentyThreeAmAttendance', 'twentyFourAmAttendance', 'twentyFiveAmAttendance', 'twentySixAmAttendance', 'twentySevenAmAttendance', 'twentyEightAmAttendance', 'twentyNineAmAttendance', 'thirtyAmAttendance', 'thirtyOneAmAttendance']
const pmArr = [
'onePmAttendance', 'twoPmAttendance', 'threePmAttendance', 'fourPmAttendance', 'fivePmAttendance', 'sixPmAttendance', 'sevenPmAttendance', 'eightPmAttendance', 'ninePmAttendance', 'tenPmAttendance', 'elevenPmAttendance', 'twelvePmAttendance', 'thirteenPmAttendance', 'fourteenPmAttendance', 'fifteenPmAttendance', 'onePmAttendance', 'twoPmAttendance', 'threePmAttendance', 'fourPmAttendance', 'fivePmAttendance', 'sixPmAttendance', 'sevenPmAttendance', 'eightPmAttendance', 'ninePmAttendance', 'tenPmAttendance', 'elevenPmAttendance', 'twelvePmAttendance', 'thirteenPmAttendance', 'fourteenPmAttendance', 'fifteenPmAttendance', 'sixteenPmAttendance', 'seventeenPmAttendance', 'eighteenPmAttendance', 'nineteenPmAttendance', 'twentyPmAttendance', 'twentyOnePmAttendance', 'twentyTwoPmAttendance', 'twentyThreePmAttendance', 'twentyFourPmAttendance', 'twentyFivePmAttendance', 'twentySixPmAttendance', 'twentySevenPmAttendance', 'twentyEightPmAttendance', 'twentyNinePmAttendance', 'thirtyPmAttendance', 'thirtyOnePmAttendance'
]
const date = res ? new Date(res) : new Date()
const y = date.getFullYear()
const m = date.getMonth() + 1
var date2 = new Date(y, m, 0)
var rq = date2.getDate() // 日 本月最后一天
var xq = date2.getDay(); // 星期 本月第一天星期幾 new Date(0).getDay()
var rq2 = rq % 7
if (rq2 === 0) {
xq = rq2 + 1
} else {
if (rq2 > xq) xq += 7
xq = xq - rq2
}
var data = [];
for (var i = 1; i <= rq; i++) {
data.push({
'ri': i,
'xq': daxier[xq]
})
xq = (++xq === 7) ? 0 : xq
}
data.map((item, index) => {
item.sw = amArr[index]
item.xw = pmArr[index]
})
this.dateList = data
},
// 獲取選中月的天數(shù)
dayNumFn(year, month) {
console.log(new Date(year, month, 0).getDate())
return new Date(year, month, 0).getDate()
}
}
element-ui渲染的效果
到此這篇關(guān)于Avue和Element-UI動(dòng)態(tài)三級(jí)表頭的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Element 動(dòng)態(tài)三級(jí)表頭內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue自定義橫向滾動(dòng)條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue自定義橫向滾動(dòng)條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue如何動(dòng)態(tài)修改el-table的某列數(shù)據(jù)
這篇文章主要介紹了Vue如何動(dòng)態(tài)修改el-table的某列數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫(xiě)這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2022-11-11
Element Plus實(shí)現(xiàn)Affix 固釘
本文主要介紹了Element Plus實(shí)現(xiàn)Affix 固釘，Affix組件用于將頁(yè)面元素固定在特定可視區(qū)域，文中通過(guò)示例代碼介紹的非常詳細(xì)，感興趣的小伙伴們可以參考一下2021-07-07
vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的操作,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue組件之間通信方式實(shí)例總結(jié)【8種方式】
這篇文章主要介紹了vue組件之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js的8種組件通信方式與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
這篇文章主要介紹了Vue 中的受控與非受控組件的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析
這篇文章主要介紹了defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo(推薦)
這篇文章主要介紹了Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo,倒計(jì)時(shí)結(jié)束后要清除計(jì)時(shí)器,防止內(nèi)存泄漏,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
這篇文章主要為大家詳細(xì)介紹了在vue2中如何處理xml格式的數(shù)據(jù),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-03-03