vue table 合并单元格

// 示例代码：Vue Table 合并单元格

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template slot-scope="scope">
        <span v-if="scope.$index === 0 || tableData[scope.$index].date !== tableData[scope.$index - 1].date">
          {{ scope.row.date }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
      ]
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.tableData.filter(item => item.date === row.date).length;
        const _col = _row > 1 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }
  }
};
</script>

<style>
/* 样式可以根据需要进行调整 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 el-table 和 el-table-column 组件来创建表格。
   • 在 date 列中，通过 slot-scope 指令和条件渲染 (v-if) 来控制是否显示日期。只有当当前行的日期与上一行不同时才会显示。

2. 脚本部分 (<script>):

   • 定义了一个 tableData 数组，包含表格的数据。
   • 使用 objectSpanMethod 方法来定义合并逻辑。对于 date 列，如果多行具有相同的日期，则这些行将被合并为一行。

3. 样式部分 (<style>):

   • 这里没有特别的样式，可以根据实际需求添加自定义样式。

通过这种方式，你可以实现 Vue 中表格的单元格合并功能。