TDesign 组件库 + vue3 + ts 如何直观地合并内容相同的表格列？(自定义合并表格列）

最编程 2024-10-08 13:41:02

...

背景

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

上一篇：区块链技术的应用场景和优势

下一篇： RAG 系统复习练习详解版：Coze 和相关产品回顾与比较，以及下一代 RAG 技术