ElementUI的Table组件行合并上手指南

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :span-method="mergeRows"
    border
  >
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="150">
    </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 弄'
        },
        // ... 更多数据
      ]
    };
  },
  methods: {
    mergeRows({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return [1, 2];
        } else {
          return [0, 0];
        }
      }
    }
  }
};
</script>

这个例子中，我们定义了一个mergeRows方法，该方法通过columnIndex判断当前是哪一列，如果是第一列（日期列），则通过rowIndex以2为间隔进行行合并。如果是偶数行，合并该行和下一行。这样做可以实现行的合并效果，展示出交替的行。