el-table树形表格合并相同的值
- el-table树形表格合并相同的值
- 让Ai进行优化后的代码
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-table
class="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-table
class="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 都为 1
return { rowspan: 1, colspan: 1 };
}
}
</script>
