【elementUi】el-table表格动态显示日期表头
发布时间
阅读量:
阅读量
效果图:

效果图讲解:前三列是固定列,后面的数字是日期,今天是几号就截止到几号,我这里是17号,数据可以根据接口显示,我这没有绑定接口数据
<el-table ref="listTable" border style="width: 100%;" :data="list"
height="100%" :header-cell-style="{background:'#f4f6f8',color:'#909399',textAlign: 'center'}"
highlight-current-row :cell-style="{ textAlign: 'center' }">
<el-table-column label="姓名" fixed></el-table-column>
<el-table-column label="考勤" fixed></el-table-column>
<el-table-column label="工号" fixed></el-table-column>
<el-table-column label="考勤结果">
<el-table-column v-for="(item,index) in transfer" :key="index" :label="item.week == '六' || item.week=='日'?item.week:item.day" width="50">
<template slot-scope="scope">
<span>{{scope.row.dailyList[item.day-1]}}</span>
</template>
</el-table-column>
</el-table-column>
</el-table>
AI写代码
注:周末的话就显示‘六’和‘日’,用三元来表示的
//获取当前时间
getNowDate(){
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() +1;
var strDate = date.getDate();
if(month >=1 && month <=9){
month = "0" + month;
}
if(strDate >= 1 && strDate <= 9){
strDate = "0" + strDate
}
var startTime = year + seperator1 + month + seperator1 + "01" //每月的1号
var endTime = year + seperator1 + month + seperator1 + strDate //今天的日期
// console.log(startTime,"===startTime===");//2023-02-01
// console.log(endTime,"===endTime===");//2023-02-17
//注意哈,下面有this的需要在data方法声明,类型为字符串
this.date = [startTime,endTime];
this.year = this.date[0].substring(0,4);//2023
this.month = month.toString().replace(/\b(0+)/gi,"");//2,'replace(/\b(0+)/gi,"")'=>去掉字符串前的0
this.start = this.date[0].substring(8,10).replace(/\b(0+)/gi,"")//1
this.end = this.date[1].substring(8,10).replace(/\b(0+)/gi,"")//17
//此处是引用函数,给它传参
this.changeFromat(this.year,this.month,this.start,this.end)
},
AI写代码
changeFromat(year,toMonth,start,daycount){
var empty = [];
for (var i = start; i <= daycount; i++) {
var current = year + "-" + toMonth + "-" + i;
var weekday = new Date(current).getDay()
var text = ""
switch (weekday){
case 0:
text = "日";
break;
case 1://一到五可以注释掉,咱们只需要处理周末的
text = "一";
break;
case 2:
text = "二";
break;
case 3:
text = "三";
break;
case 4:
text = "四";
break;
case 5:
text = "五";
break;
case 6:
text = "六";
break;
}
var thisDay = String(i)
var emp = {
day:thisDay,
week:text
}
empty.push(emp)
}
this.transfer = empty
console.log(this.transfer,"===transfer====");
},
AI写代码
总结
两段函数,一段获取当前时间,一段对时间做处理,循环显示
如果不能实现,请在公屏上打出你的问题,哈哈

全部评论 (0)
还没有任何评论哟~
