自定义vue组件：
使用 Element UI 的<el-table>组件，并根据设备组字段：device_group_desc，进行合并表格中的行：
1、动态生成列定义：根据数据动态生成列定义。
2、合并行：根据相同的设备组字段：device_group_desc，来实现行合并。
效果如下：
<template> <div style="overflow: auto"> {{dataChart.value}} <el-table :data="filteredTableData" border class="custom-table" :span-method="spanMethod"> <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :align="column.align" /> </el-table> </div></template><script> export default { data() { return { // 原始数据 rawData: [ { device_group_desc: "1#达克罗线", batch_code: "2471-2", afqty: "3630/3775", product_spec: "M36*450", product_date: "2024-10-06", aaa: 123, work_shift: "机甲班组" }, { device_group_desc: "1#达克罗线", batch_code: "249143-2", afqty: "520/525", product_spec: "M56*760", product_date: "2024-09-27", work_shift: "机甲班组" }, { device_group_desc: "1#达克罗线", batch_code: "249325-2", afqty: "796/805", product_spec: "M52*470", product_date: "2024-09-27", work_shift: "机甲班组" }, { device_group_desc: "锯床-1", batch_code: "246410-1", afqty: "670/690", product_spec: "Φ124*Φ66*100", product_date: "2024-10-16", work_shift: "机甲班组" }, { device_group_desc: "锯床-2", batch_code: "246410-1", afqty: "670/690", product_spec: "Φ124*Φ66*100", product_date: "2024-10-16", aaa: 345, work_shift: "质检班组" } ], filteredTableData: [], columns: [], rowSpanObj: {}, }; }, computed: { // 动态生成列定义 dynamicColumns() { const keys = Object.keys(this.filteredTableData[0]); return keys .filter((key) => key !== "work_shift") .map((key, index) => { let str; if (key === 'device_group_desc') { str = "设备组" } else { str = `生产批次${index}` } return { label: str, // 动态生成列名 prop: key, width: "180", } }); }, }, methods: { initData() { const { rawData, rowSpanObj } = this; // 筛选班组 const filteredData = rawData.filter( (item) => item.work_shift === "机甲班组" ); // 初始化列定义 this.columns = this.dynamicColumns; }, // 合并方法 spanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 只合并第一列 if (rowIndex > 0 && row.device_group_desc === this.filteredTableData[rowIndex - 1].device_group_desc) { // 如果当前行和前一行的 device_group_desc 相同，则合并 return { rowspan: 0, colspan: 1 }; } else { // 否则，计算 rowspan let rowspan = 1; for (let i = rowIndex + 1; i < this.filteredTableData.length; i++) { if (row.device_group_desc === this.filteredTableData[i].device_group_desc) { rowspan++; } else { break; } } return { rowspan: rowspan, colspan: 1 }; } } return { rowspan: 1, colspan: 1 }; }, }, mounted() { this.filteredTableData = this.rawData; this.initData(); }, };</script><style scoped> .el-table__cell { color: #4484dc; background-color: #142c44; } .custom-table .el-table__header th { text-align: center; background-color: #142c44; /* 设置表头字体大小 */ font-size: 16px; } .el-table__empty-block { height: 100%; background-color: #142c44; }</style>
