Element UI的table不同应用-编程知识

一、自定义表头

二、纵向表头(动态表头)

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-columnprop="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-columnv-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博客