如何在表格组件中实现相同内容连续单元格自动合并居中？

原生HTML+JavaScript实现 #

如果是纯前端原生开发，可通过JS遍历表格数据，计算连续相同单元格的跨度，修改单元格的rowspan属性并隐藏重复项，配合CSS实现居中：

1. HTML结构

<table id="mergeTable" border="1">
  <thead>
    <tr>
      <th>分类</th>
      <th>商品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>电子产品</td><td>手机</td><td>3999</td></tr>
    <tr><td>电子产品</td><td>电脑</td><td>5999</td></tr>
    <tr><td>电子产品</td><td>耳机</td><td>299</td></tr>
    <tr><td>生活用品</td><td>毛巾</td><td>19</td></tr>
    <tr><td>生活用品</td><td>牙刷</td><td>9</td></tr>
  </tbody>
</table>

2. JavaScript合并逻辑

function mergeCells(tableId, colIndex) {
  const table = document.getElementById(tableId);
  const tbody = table.tBodies[0];
  const rows = tbody.rows;
  let prevValue = rows[0].cells[colIndex].textContent;
  let count = 1;

  for (let i = 1; i < rows.length; i++) {
    const currentValue = rows[i].cells[colIndex].textContent;
    if (currentValue === prevValue) {
      count++;
      rows[i].cells[colIndex].style.display = 'none';
    } else {
      rows[i - count].cells[colIndex].rowSpan = count;
      prevValue = currentValue;
      count = 1;
    }
  }
  // 处理最后一组连续单元格
  rows[rows.length - count].cells[colIndex].rowSpan = count;
}

// 调用函数，合并第0列（分类列）
mergeCells('mergeTable', 0);

3. CSS居中样式

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: center;
  padding: 8px;
}

Vue + Element UI实现 #

Element UI的el-table组件提供span-method属性自定义单元格合并规则，同时通过align属性设置整体居中：

<template>
  <el-table
    :data="tableData"
    :span-method="objectSpanMethod"
    border
    align="center"
  >
    <el-table-column prop="category" label="分类" />
    <el-table-column prop="goods" label="商品" />
    <el-table-column prop="price" label="价格" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { category: '电子产品', goods: '手机', price: 3999 },
        { category: '电子产品', goods: '电脑', price: 5999 },
        { category: '电子产品', goods: '耳机', price: 299 },
        { category: '生活用品', goods: '毛巾', price: 19 },
        { category: '生活用品', goods: '牙刷', price: 9 }
      ],
      spanArr: []
    };
  },
  created() {
    this.getSpanArr();
  },
  methods: {
    getSpanArr() {
      let count = 1;
      this.spanArr = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (i < this.tableData.length - 1 && this.tableData[i].category === this.tableData[i + 1].category) {
          count++;
        } else {
          this.spanArr.push({ row: count, col: 1 });
          count = 1;
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const { row, col } = this.spanArr[rowIndex];
        return { rowspan: row, colspan: col };
      }
    }
  }
};
</script>

React + Ant Design实现 #

Ant Design的Table组件可通过customCell设置单元格的rowSpan，配合align属性实现居中：

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';

const TableMerge = () => {
  const [dataSource, setDataSource] = useState([
    { key: '1', category: '电子产品', goods: '手机', price: 3999 },
    { key: '2', category: '电子产品', goods: '电脑', price: 5999 },
    { key: '3', category: '电子产品', goods: '耳机', price: 299 },
    { key: '4', category: '生活用品', goods: '毛巾', price: 19 },
    { key: '5', category: '生活用品', goods: '牙刷', price: 9 }
  ]);
  const [rowSpans, setRowSpans] = useState([]);

  useEffect(() => {
    const calculateRowSpans = () => {
      const spans = [];
      let count = 1;
      for (let i = 0; i < dataSource.length; i++) {
        if (i < dataSource.length - 1 && dataSource[i].category === dataSource[i + 1].category) {
          count++;
          spans.push(0);
        } else {
          spans.push(count);
          count = 1;
        }
      }
      setRowSpans(spans);
    };
    calculateRowSpans();
  }, [dataSource]);

  const columns = [
    {
      title: '分类',
      dataIndex: 'category',
      align: 'center',
      customCell: (_, index) => ({ rowSpan: rowSpans[index] })
    },
    { title: '商品', dataIndex: 'goods', align: 'center' },
    { title: '价格', dataIndex: 'price', align: 'center' }
  ];

  return <Table dataSource={dataSource} columns={columns} bordered />;
};

export default TableMerge;

内容的提问来源于stack exchange，提问作者user22567989