TDesign组件库+vue3+ts 如何视觉上合并相同内容的table列？（自定义合并table列）

背景

当table的某一列的某些内容相同时，需要在视觉上合并这一部分的内容为同个单元格

如上图所示，比如需要合并当申请人为同个字段的列。

解决代码

<t-table:data="filteredData":columns="columns":rowspan-and-colspan="rowspanAndColspanMethod"row-key="id"></t-table>function rowspanAndColspanMethod({ col, rowIndex }) {if (col.colKey === 'name') { // 这里需要获取的是需要合并的列的名字const currentName = filteredData.value[rowIndex].name;let rowspan = 1;for (let i = rowIndex + 1; i < filteredData.value.length; i++) {if (filteredData.value[i].name === currentName) {rowspan++;} else {break;}}return { rowspan };}return {};
}

在 rowspanAndColspanMethod 函数中，添加对 name 列的处理。

• 如果 col.colKey === ‘name’，则获取当前行的 name 的 currentName。
• 使用一个 for循环从当前行的下一行开始，检查后续行的 Name 是否与 currentName 相同。
• 如果相同，则增加 rowspan 计数器。
• 如果不同，则停止循环。 返回包含 rowspan 的对象。

通过这种方式，当 name 相同时，它们将在视觉上合并为同一个单元格。