如何在Element UI中实现表格主体（tbody）分组及单元格跨列合并

Element UI官方仅提供表头分组方案，要实现tbody内的单元格跨列分组，可通过表格的span-method属性结合自定义列模板来实现，以下是具体方案：

核心逻辑 #

利用span-method控制单元格的colspan（跨列数）和rowspan（跨行数），将需要分组的单元格设置为跨列，同时隐藏被合并的列，再通过自定义模板渲染分组内的内容。

具体实现步骤 #

1. 整理结构化数据 #

给每条数据添加分组标识，明确各分组包含的字段：

const tableData = [
  { 
    id: 1, 
    groupTitle: "基础信息", 
    username: "张三", 
    age: 28, 
    group2Title: "账户信息", 
    balance: 1000, 
    level: "VIP3" 
  },
  { 
    id: 2, 
    groupTitle: "基础信息", 
    username: "李四", 
    age: 32, 
    group2Title: "账户信息", 
    balance: 2500, 
    level: "VIP5" 
  }
];

2. 编写合并计算方法 #

实现span-method对应的函数，根据列索引判断是否需要跨列或隐藏：

const handleSpan = ({ columnIndex }) => {
  // 第一列（基础信息）跨2列
  if (columnIndex === 0) {
    return { rowspan: 1, colspan: 2 };
  }
  // 第二列被合并，设置为0不显示
  if (columnIndex === 1) {
    return { rowspan: 0, colspan: 0 };
  }
  // 第三列（账户信息）跨2列
  if (columnIndex === 2) {
    return { rowspan: 1, colspan: 2 };
  }
  // 第四列被合并，设置为0不显示
  if (columnIndex === 3) {
    return { rowspan: 0, colspan: 0 };
  }
  // 其他列默认不合并
  return { rowspan: 1, colspan: 1 };
};

3. 配置表格组件 #

绑定span-method，并通过自定义模板渲染分组内的多字段内容：

<el-table 
  :data="tableData" 
  :span-method="handleSpan" 
  border
  style="width: 100%;"
>
  <!-- 基础信息分组列 -->
  <el-table-column label="基础信息">
    <template slot-scope="scope">
      <div class="group-cell">
        <div>{{ scope.row.groupTitle }}</div>
        <div class="group-content">
          <span>姓名：{{ scope.row.username }}</span>
          <span>年龄：{{ scope.row.age }}</span>
        </div>
      </div>
    </template>
  </el-table-column>
  <!-- 被合并的隐藏列 -->
  <el-table-column prop="age" />

  <!-- 账户信息分组列 -->
  <el-table-column label="账户信息">
    <template slot-scope="scope">
      <div class="group-cell">
        <div>{{ scope.row.group2Title }}</div>
        <div class="group-content">
          <span>余额：{{ scope.row.balance }}元</span>
          <span>等级：{{ scope.row.level }}</span>
        </div>
      </div>
    </template>
  </el-table-column>
  <!-- 被合并的隐藏列 -->
  <el-table-column prop="level" />
</el-table>

4. 自定义样式优化 #

添加CSS调整分组单元格的布局和样式：

.group-cell {
  padding: 10px;
}
.group-content {
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
}
.el-table__cell[colspan="2"] {
  border-right: 2px solid #e6e6e6;
}

拓展说明 #

如果需要实现多行同分组的跨行合并，只需在handleSpan中增加对rowIndex和相邻行分组标识的判断，动态设置rowspan的值即可。

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