当前位置：首页 > uni-app

uniapp表格合并行

2026-02-06 08:23:22uni-app

uniapp表格合并行实现方法

在uniapp中实现表格合并行通常需要结合<table>标签和CSS样式，或使用第三方组件库。以下是几种常见方法：

使用HTML表格和rowspan属性

通过HTML原生属性实现跨行合并：

<template>
  <view>
    <table border="1" style="width:100%">
      <tr>
        <td rowspan="2">合并行</td>
        <td>单元格1</td>
      </tr>
      <tr>
        <td>单元格2</td>
      </tr>
    </table>
  </view>
</template>

使用uni-table组件（官方扩展组件）

需要安装@dcloudio/uni-ui后使用：

<template>
  <uni-table>
    <uni-tr>
      <uni-td rowspan="2">合并内容</uni-td>
      <uni-td>数据A</uni-td>
    </uni-tr>
    <uni-tr>
      <uni-td>数据B</uni-td>
    </uni-tr>
  </uni-table>
</template>

动态合并行实现

通过计算属性处理需要合并的数据：

computed: {
  processedData() {
    let mergeCount = 0;
    return this.tableData.map((item, index) => {
      if (mergeCount > 0) {
        mergeCount--;
        return { ...item, shouldMerge: true };
      }
      if (index < this.tableData.length - 1 && 
          item.group === this.tableData[index + 1].group) {
        mergeCount = this.getMergeCount(index);
        return { ...item, rowspan: mergeCount + 1 };
      }
      return item;
    });
  }
}

第三方组件库解决方案

使用uView等UI库的表格组件：

<template>
  <u-table>
    <u-tr>
      <u-td :rowspan="2">分类</u-td>
      <u-td>项目1</u-td>
    </u-tr>
    <u-tr>
      <u-td>项目2</u-td>
    </u-tr>
  </u-table>
</template>

样式优化建议

合并行时需要特别注意边框样式：

.uni-table td {
  border-collapse: collapse;
}
.merged-cell {
  position: relative;
  z-index: 1;
}

动态合并算法示例

对于动态数据的行合并处理：

function mergeTableRows(data, key) {
  const mergedData = [];
  let count = 1;

  data.forEach((item, index) => {
    if (index === 0 || item[key] !== data[index - 1][key]) {
      count = 1;
      for (let i = index + 1; i < data.length; i++) {
        if (item[key] === data[i][key]) count++;
        else break;
      }
      mergedData.push({ ...item, rowspan: count });
    } else {
      mergedData.push({ ...item, rowspan: 0 });
    }
  });

  return mergedData;
}

实现时需根据实际数据结构调整合并逻辑，注意跨平台渲染差异，部分小程序环境可能需要对表格实现进行特殊处理。

uniapp表格合并行