el-table 合并

el-table是一个前端组件库element-ui中的表格组件，它提供了合并行和列的功能。通过设置span-method属性，可以自定义合并行的方式，具体可以通过循环数据源数据获取该列需要合并的行数，以实现多行相同数据变成一行显示的效果。

示例代码如下：

<template>
  <div class="table">
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
      <el-table-column prop="time" label="时间"></el-table-column>
      <el-table-column prop="grade" label="年级"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="subjects" label="科目"></el-table-column>
      <el-table-column prop="score" label="成绩"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { time: '2020-01-01', grade: '一年级', name: '张三', subjects: '语文', score: 90 },
        { time: '2020-01-01', grade: '一年级', name: '李四', subjects: '数学', score: 95 },
        { time: '2020-01-01', grade: '一年级', name: '王五', subjects: '英语', score: 88 },
        { time: '2020-01-02', grade: '二年级', name: '赵六', subjects: '语文', score: 92 },
        { time: '2020-01-02', grade: '二年级', name: '钱七', subjects: '数学', score: 96 },
        { time: '2020-01-02', grade: '二年级', name: '孙八', subjects: '英语', score: 85 },
      ],
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 根据业务逻辑判断需要合并的行数
      if (columnIndex === 0) {
        // 合并第一列
        if (rowIndex === 0 || rowIndex === 3) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        }
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },
  },
};
</script>