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 相同时，它们将在视觉上合并为同一个单元格。