ElementUI Rowspan

开头简述解决方案

在使用ElementUI表格组件时，我们常常会遇到需要合并单元格的需求。对于行合并（rowspan），ElementUI提供了一个简单而强大的解决方案：通过span-method属性来自定义合并逻辑。如何实现行合并，并提供多种实现思路。

1. 基础用法

最简单的实现方式是使用span-method属性，该属性接收一个函数作为参数，返回一个包含 rowspan 和 colspan 的对象。当返回值为 {rowspan: 0, colspan: 0} 时，表示该单元格不显示。

html
<el-table :data="tableData" :span-method="objectSpanMethod">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>


javascript
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 合并列的相同内容
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return [1, 2];
} else {
return [0, 0];
}
}
}
}


2. 动态计算合并规则

如果需要根据数据动态计算合并规则，可以先对数据进行预处理：

javascript
// 数据预处理
function processTableData(data) {
  const result = [];
  let lastValue;
  let mergeCount = 1;</p>

<p>data.forEach((item, index) => {
    if (item.name === lastValue) {
      mergeCount++;
    } else {
      if (index > 0) {
        result[result.length - 1].mergeCount = mergeCount;
      }
      mergeCount = 1;
    }
    result.push({ ...item });
    lastValue = item.name;
  });</p>

<p>if (result.length > 0) {
    result[result.length - 1].mergeCount = mergeCount;
  }</p>

<p>return result;
}</p>

<p>// 使用方法
data() {
  return {
    tableData: processTableData([
      { name: '张三', age: 20 },
      { name: '张三', age: 21 },
      { name: '李四', age: 22 },
      { name: '王五', age: 23 }
    ])
  }
}</p>

<p>methods: {
  objectSpanMethod({ row, column, rowIndex }) {
    if (column.property === 'name') {
      if (row.mergeCount > 1) {
        return [row.mergeCount, 1];
      } else {
        return [1, 1];
      }
    }
  }
}

3. 多列合并

有时我们需要同时合并多列，可以通过判断多个条件来实现：

javascript
methods: {
  objectSpanMethod({ row, column, rowIndex }) {
    const nameMerge = {};
    const ageMerge = {};</p>

<pre><code>if (column.property === 'name') {
  // 名字相同的合并
  nameMerge.rowspan = row.name === this.tableData[rowIndex - 1]?.name ? 0 : 1;
  nameMerge.colspan = 1;
  return nameMerge;
}

if (column.property === 'age') {
  // 年龄相同的也合并
  ageMerge.rowspan = row.age === this.tableData[rowIndex - 1]?.age ? 0 : 1;
  ageMerge.colspan = 1;
  return ageMerge;
}

}
}

以上三种方法都可以实现ElementUI表格的行合并功能，具体选择哪种方式取决于实际业务需求。基础用法适合简单的场景，动态计算更适合处理复杂数据，而多列合并则适用于需要同时合并多个字段的情况。