目录
一、自定义表头
二、纵向表头(动态表头)
2.1、分别拿到表头和表头中日期对应的行数据
2.2、拿到每个日期对应的列数据
一、自定义表头
<el-table-column prop="chu" align="center">
<!-- 自定义表头 -->
<template slot="header"
><span class="circle" style="background: #5dd49f"></span
>出勤</template
>
</el-table-column>二、纵向表头(动态表头)
以课表考勤图为例：
有两种格式的数据：
2.1、分别拿到表头和表头中该课节对应的行数据
<el-table
:data="tableOldData"
style="width: 100%"
border
:row-style="{ height: '100px' }"
:header-cell-style="{background: '#F8F8F8',color: '#172b4d',height: '70px',}"
v-if="visibleCalendar.length > 0">
<el-table-column
prop="name"
label="课节"
fixed="left"
width="120"
align="center"
>
</el-table-column>
<el-table-column
:label="item.date + item.week"
v-for="(item, index) in visibleCalendar"
:key="index"
align="center"
>
<template slot-scope="{ row }">
<div class="cell_boxs" v-if="row.dayData[item.date].type > -1">
<div class="cell_tops">
<span
:style="
'background-color:' +
colorType(row.dayData[item.date].type)
"
class="circle"
></span>
<span>{{
typeStatistics(row.dayData[item.date].type)
}}</span>
</div>
<div class="cell_bottom">
<span>{{ row.dayData[item.date].subject }}</span>
<span>{{ row.dayData[item.date].name }}</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
<script>
data() {
return {
visibleCalendar: [
{ date: "2023-09-26", week: "周六" },
{ date: "2023-10-25", week: "周一" },
{ date: "2023-10-26", week: "周二" },
{ date: "2023-10-27", week: "周三" },
{ date: "2023-10-28", week: "周四" },
{ date: "2023-10-29", week: "周五" },
],
dateTable: [
{
name: "第1-2节",
dayData: {
"2023-10-25": {
type: 1,
name: "赵翔",
subject: "英语写作基础",
},
"2023-10-26": {
type: 0,
name: "赵翔",
subject: "英语写作基础",
},
"2023-10-27": {
type: 2,
name: "赵翔",
subject: "英语写作基础",
},
},
},
{
name: "第3-4节",
dayData: {
"2023-09-26": {
type: 2,
name: "都会迟",
subject: "奥术模拟",
},
},
},
{
name: "第5-6节",
dayData: {
"2023-10-28": {
type: 3,
name: "王鹏",
subject: "新闻播报",
},
"2023-10-29": {
type: 4,
name: "王鹏",
subject: "新闻播报",
},
},
},
],
}
},
computed: {
tableOldData() {
const oldData = [];
this.dateTable.forEach((item) => {
const newItem = { ...item };
const dayData = newItem.dayData;
newItem.dayData = {};
this.visibleCalendar.forEach((item) => {
let oldDate = item.date;
if (dayData[oldDate]) {
newItem.dayData[oldDate] = dayData[oldDate];
} else {
newItem.dayData[oldDate] = {};
}
});
oldData.push(newItem);
});
return oldData;
},
},
methods: {
typeStatistics(index) {
const status = ["出勤", "迟到", "旷课", "早退", "请假"];
return status[index] || "";
},
colorType(index) {
const colors = ["#6BC25E", "#F0A55C", "#E77575", "#F0A55C", "#6FBFF1"];
return colors[index] || "";
},
}
</script>tableOldData是表格上最终要渲染的数据源；visibleCalendar是返回的表头；dateTable是表头中的日期对应的全部数据。渲染的时候，根据visibleCalendar里的日期去找对应的值。
2.2、拿到每个日期对应的列数据
<el-table
style="width: 100%"
:data="getValues"
:show-header="false"
border>
<el-table-column fixed width="120" align="center">
<template slot-scope="{ row }">
<div class="cell_header">
{{ row.title }}
</div>
</template>
</el-table-column>
<!--(拿到列数据时) 纵向垂直表头 -->
<!-- 左侧固定，右侧列数动态变化，min-width设置宽度 -->
<template v-for="(item, i) in getHeaders">
<el-table-column
v-if="item != 'title'"
:show-overflow-tooltip="true"
:label="item"
:key="i"
min-width="174"
align="center"
>
<template slot-scope="{ row }">
<div class="cell_boxs" v-if="row[item] && row[item].name">
<div class="cell_tops">
<span
:style="'background-color:' + colorType(row[item].type)"
class="circle"
></span>
<span>{{ typeStatistics(row[item].type) }}</span>
</div>
<div class="cell_bottom">
<span>{{ row[item].subject }}</span>
<span>{{ row[item].name }}</span>
</div>
</div>
<div class="cell_header" v-else>
{{ row[`value${i - 1}`] }}
</div>
</template>
</el-table-column>
</template>
</el-table>
<script>
data() {
return {
headers: [
{
prop: "date",
label: "课节",
},
{
prop: "one",
label: "第1-2节",
},
{
prop: "two",
label: "第3-4节",
},
{
prop: "three",
label: "第5-6节",
},
{
prop: "four",
label: "第7-8节",
},
{
prop: "five",
label: "第9-10节",
},
],
otherDatas: [
{
date: "2023-10-25",
one: { type: 1, name: "赵翔1", subject: "英语写作基础" },
},
{
date: "2023-10-26",
three: { type: 2, name: "赵翔6", subject: "英语写作基础" },
},
{
date: "2023-10-27",
one: { type: 3, name: "赵翔7", subject: "英语写作基础" },
},
{
date: "2023-10-28",
one: { type: 4, name: "赵翔7", subject: "英语写作基础" },
two: { type: 1, name: "赵翔8", subject: "英语写作基础" },
three: { type: 2, name: "赵翔9", subject: "英语写作基础" },
},
],
}
},
computed: {
getHeaders() {
return this.otherDatas.reduce(
//对数组累积操作
(pre, cur, index) => pre.concat(`value${index}`),
["title"]
);
},
getValues() {
return this.headers.map((item) => {
return this.otherDatas.reduce(
(pre, cur, index) =>
Object.assign(pre, { ["value" + index]: cur[item.prop] }),
{ title: item.label }
);
});
},
},
methods: {
typeStatistics(index) {
const status = ["出勤", "迟到", "旷课", "早退", "请假"];
return status[index] || "";
},
colorType(index) {
const colors = ["#6BC25E", "#F0A55C", "#E77575", "#F0A55C", "#6FBFF1"];
return colors[index] || "";
},
}
</script>通过headers这个数组确定要组装的数据源otherDatas格式，这样出来的数据每一行就是表格的row了。
第二种格式数据参考博客：el-table 纵向垂直表头_el-table纵向表头_wh4834的博客-CSDN博客
