el-table树形表格合并相同的值

el-table树形表格合并相同的值

<style lang="scss" scoped>
.tableBox {/deep/ &.el-table th:first-child,/deep/ &.el-table td:first-child {padding-left: 0;}
}
</style>
<template><div><el-tableclass="tableBox"row-key="uniID"ref="refTable":data="tableData"style="width: 100%"border:span-method="arraySpanMethod":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="dateTime" label="时间" key="dateTime" min-width="140"><template slot-scope="{ row }">{{ row.groupNo ? findValue(row.groupNo, groupNoList) : row.dateTime }}</template></el-table-column><el-table-column prop="yieldConsume" label="产量(t)" key="yieldConsume" min-width="110" /></el-table></div>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';interface TableRow {uniID: number;dateTime: string;groupNo: number | null;yieldConsume: number;children?: TableRow[];parent?: TableRow | null;
}@Component({})
export default class EnergyAnalysis extends Vue {private tableData: TableRow[] = [];private groupNoList: any = [{value: '甲',key: 1,},{value: '乙',key: 2,},{value: '丙',key: 3,},{value: '丁',key: 4,},];private testData = {data: {everyDetail: [{dateTime: '2025-03-01',groupNo: null,yieldConsume: -30176.691,children: [{dateTime: '2025-03-01',groupNo: 1,yieldConsume: 100,children: null,},{dateTime: '2025-03-01',groupNo: 1,yieldConsume: -18885.714,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 100,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 101,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 102,children: null,},],},{dateTime: '2025-03-02',groupNo: null,yieldConsume: -30176.691,children: [{dateTime: '2025-03-02',groupNo: 1,yieldConsume: 111,children: null,},],},],},};created() {this.statisticsQuery();}private findValue(data: any, list: any) {const a = list.find((el: any) => el.key === data);return a ? a.value : '-';}private async statisticsQuery() {let index = 1;// 递归函数将原始数据转换为包含父子关系的TableRow对象数组const recursionList = (list: any[], parent: TableRow | null = null): TableRow[] => {return list?.map((v: any) => {const newRow: TableRow = {...v,uniID: index++,parent: parent,};if (v.children) {newRow.children = recursionList(v.children, newRow);}return newRow;});};const data = this.testData;// 处理成表格所需的格式this.tableData = recursionList(data.data?.everyDetail);this.$nextTick(() => {(this.$refs as any).refTable.doLayout();});}/*** arraySpanMethod 方法用于定义表格中的单元格合并规则。* 此方法接收一个参数，该参数包含当前行和列的信息，包括 row、column、rowIndex 和 columnIndex。** @param {Object} param - 包含当前行和列信息的对象。* @param {TableRow} param.row - 当前行的数据对象。* @param {VueTableColumn} param.column - 当前列的信息对象。* @param {number} param.rowIndex - 当前行的索引。* @param {number} param.columnIndex - 当前列的索引。** 此方法特别处理了第一列（即时间列）的单元格合并逻辑：* 如果当前行的 `groupNo` 不为空，则检查其是否与兄弟节点有相同的 `groupNo` 值，* 若相同则进行单元格合并。否则返回默认的合并值（即不合并）。*/private arraySpanMethod({ row, column, rowIndex, columnIndex }: any) {// 仅对第一列应用合并逻辑if (columnIndex === 0) {// 如果当前行有 `groupNo` 值if (row.groupNo != null) {const parent = row.parent; // 获取父级数据对象if (parent && parent.children) {// 确保存在父级及子节点列表const siblings = parent.children; // 子节点列表const currentIndex = siblings.findIndex((sib: TableRow) => sib.uniID === row.uniID); // 查找当前行在子节点列表中的位置// 如果找不到当前行的位置，则直接返回默认合并值if (currentIndex === -1) return [1, 1];let count = 1; // 初始化计数器，用于计算需要合并的单元格数量// 遍历后续的兄弟节点，查找具有相同 `groupNo` 的连续单元格for (let i = currentIndex + 1; i < siblings.length; i++) {if (siblings[i].groupNo === row.groupNo) {count++; // 相同 `groupNo` 则计数器加一} else {break; // 遇到不同的 `groupNo` 则停止计数}}// 如果当前行不是第一个具有该 `groupNo` 的行，则不显示此行if (currentIndex > 0 && siblings[currentIndex - 1].groupNo === row.groupNo) {return { rowspan: 0, colspan: 0 }; // 返回0表示不渲染该单元格} else {// 否则，根据计算出的连续相同 `groupNo` 单元格的数量返回合并值return { rowspan: count, colspan: 1 };}}} else {// 对于没有 `groupNo` 的行，返回默认合并值return { rowspan: 1, colspan: 1 };}}// 默认情况下，所有其他列不进行单元格合并return { rowspan: 1, colspan: 1 };}
}
</script>

让Ai进行优化后的代码

注意：以下为Ai生成，暂未测试性能内存等是否真的进行了优化

<style lang="scss" scoped>
.tableBox {/deep/ &.el-table th:first-child,/deep/ &.el-table td:first-child {padding-left: 0;}
}
</style>
<template><div><el-tableclass="tableBox"row-key="uniID"ref="refTable":data="tableData"style="width: 100%"border:span-method="arraySpanMethod":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="dateTime" label="时间" key="dateTime" min-width="140"><template slot-scope="{ row }">{{ row.groupNo ? findValue(row.groupNo, groupNoList) : row.dateTime }}</template></el-table-column><el-table-column prop="yieldConsume" label="产量(t)" key="yieldConsume" min-width="110" /></el-table></div>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';interface TableRow {uniID: number;dateTime: string;groupNo: number | null;yieldConsume: number;children?: TableRow[];parent?: TableRow | null;// 新增预处理字段spanInfo?: {rowspan: number;hidden: boolean;};
}@Component({})
export default class EnergyAnalysis extends Vue {private tableData: TableRow[] = [];private groupNoList: any = [{value: '甲',key: 1,},{value: '乙',key: 2,},{value: '丙',key: 3,},{value: '丁',key: 4,},];private testData = {data: {everyDetail: [{dateTime: '2025-03-01',groupNo: null,yieldConsume: -30176.691,children: [{dateTime: '2025-03-01',groupNo: 1,yieldConsume: 100,children: null,},{dateTime: '2025-03-01',groupNo: 1,yieldConsume: -18885.714,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 100,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 101,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 102,children: null,},],},{dateTime: '2025-03-02',groupNo: null,yieldConsume: -30176.691,children: [{dateTime: '2025-03-02',groupNo: 1,yieldConsume: 111,children: null,},],},],},};created() {this.statisticsQuery();}private findValue(data: any, list: any) {const a = list.find((el: any) => el.key === data);return a ? a.value : '-';}private async statisticsQuery() {let index = 1;const recursionList = (list: any[], parent: TableRow | null = null): TableRow[] => {return list?.map((v: any) => {const newRow: TableRow = {...v,uniID: index++,parent: parent,spanInfo: { rowspan: 1, hidden: false }, // 初始化合并信息};// 预处理子节点的合并信息if (newRow.children) {newRow.children = recursionList(newRow.children, newRow);this.preCalculateSpan(newRow.children); // 关键优化点}return newRow;});};const data = this.testData;this.tableData = recursionList(data.data?.everyDetail);this.$nextTick(() => {(this.$refs as any).refTable.doLayout();});}/*** 预处理合并信息 (核心优化逻辑)* @param children - 子节点列表，包含需要进行合并处理的行数据。*/preCalculateSpan(children: TableRow[]) {let pos = 0; // 当前处理的位置指针while (pos < children.length) {// 遍历所有子节点const current = children[pos]; // 当前处理的行if (current.groupNo == null) {// 如果当前行没有组编号，则跳过pos++;continue;}// 向后查找相同 groupNo 的数量let sameCount = 1; // 初始化相同组编号的数量为1（包括当前行）for (let i = pos + 1; i < children.length; i++) {// 从下一个元素开始查找if (children[i].groupNo === current.groupNo) {// 如果发现相同组编号sameCount++; // 增加计数} else {break; // 一旦遇到不同的组编号，停止查找}}// 更新合并信息current.spanInfo = { rowspan: sameCount, hidden: false }; // 设置当前行为合并起始行for (let j = pos + 1; j < pos + sameCount; j++) {// 对于后续的相同组编号的行children[j].spanInfo = { rowspan: 0, hidden: true }; // 标记这些行为隐藏状态，不需要显示}pos += sameCount; // 移动位置指针，跳过已处理的行}}/*** 合并方法直接使用预处理结果* @param param - 包含 row（当前行数据）、column（当前列配置）、columnIndex（当前列索引）的对象。* @returns 返回一个对象，指定当前单元格的 rowspan 和 colspan。*/arraySpanMethod({ row, column, columnIndex }: any) {// 只对第一列应用合并规则if (columnIndex === 0 && row.spanInfo) {return {rowspan: row.spanInfo.rowspan, // 根据预处理结果设置行跨度colspan: row.spanInfo.hidden ? 0 : 1, // 如果该行被标记为隐藏，则设置 colspan 为 0};}// 默认情况下，每个单元格的 rowspan 和 colspan 都为 1return { rowspan: 1, colspan: 1 };}
}
</script>