el-table 内容相同合并 单元格

`el-table` 是 Element UI 提供的一个表格组件，在 Vue.js 中常用于展示数据列表。当你需要在同一行显示内容相同的单元格，例如日期、状态等固定信息，可以利用 `el-table` 的 `rowspan` 或 `colspan` 属性来合并单元格。

`rowspan` 表示跨越多行，`colspan` 则表示跨越多列。基本用法如下：

<template>
  <el-table :data="tableData">
    <el-table-column type="index"></el-table-column> <!--索引列，可选 -->
    <el-table-column prop="date" label="日期" :formatter="formatDate"></el-table-column>
    <el-table-column prop="status" label="状态" :formatter="formatStatus"></el-table-column>
    
    <!-- 合并单元格 -->
    <el-table-column prop="content" label="内容">
      <template slot-scope="{ row }">
        {{ row.date }}<br />
        {{ row.status }}
        <template v-if="row.content.length > 0"> (具体内容)</template>
        <el-row :gutter="20" :span="2">
          <el-col :span="1">{{ row.content }}</el-col>
          <el-col :span="row.rowspan - 1">...</el-col> <!-- 使用 row.rowspan 自动计算跨越行数 -->
        </el-row>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '01-01', status: '状态1', content: '内容1' },
        { date: '01-02', status: '状态1', content: '内容1' }, // 这两行内容相同
        ...,
      ],
      formatDate(row) {
        return `${row.date}`;
      },
      formatStatus(row) {
        return `${row.status}`;
      }
    };
  }
};
</script>

在这个例子中，当表中的 "内容" 相同时，会将该列的单元格合并，并使用 `row.rowspan` 来动态指定跨越的行数。