Advertisement

【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)

还没有任何评论哟~