Vue Element UI el-table 连续相同列值合并单元格教程 - 完整示例代码

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :span-method="mergeCell"
  >
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          { name: 'John', age: 18, address: 'New York' },
          { name: 'John', age: 20, address: 'Los Angeles' },
          { name: 'Mary', age: 22, address: 'Chicago' },
          { name: 'Mary', age: 25, address: 'Houston' }
        ]
      };
    },
    methods: {
      mergeCell({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex > 0 && row.name === this.tableData[rowIndex - 1].name) {
            return {
              rowspan: 0,
              colspan: 1
            };
          } else {
            return {
              rowspan: 1,
              colspan: 1
            };
          }
        }
      }
    }
  };
</script>
<h2>使用 <code>span-method</code> 属性实现合并单元格</h2>
<p>要实现连续相同的列值合并单元格，可以使用 <code>span-method</code> 属性来定义合并规则。</p>
<p>首先，你需要为 <code>el-table</code> 组件添加一个 <code>span-method</code> 属性，该属性的值是一个函数，用于定义合并规则。函数接收三个参数：<code>{ row, column, rowIndex, columnIndex }</code>，分别表示当前行数据、当前列数据、当前行索引和当前列索引。</p>
<p>在函数中，你可以根据需要定义合并规则。例如，你可以比较当前列值与上一行的列值是否相同，如果相同，则返回一个对象，设置 <code>rowspan</code> 属性为 0，表示合并单元格；如果不相同，则返回一个对象，设置 <code>rowspan</code> 属性为 1，表示不合并单元格。</p>
<h2>示例代码</h2>
<p>上面的代码展示了如何使用 <code>span-method</code> 属性来实现连续相同的列值合并单元格的功能。你可以根据自己的需求来修改合并规则，例如，你可以合并其他列的相同值，或者根据其他条件来决定是否合并单元格。</p>
<h2>总结</h2>
<p>使用 <code>span-method</code> 属性可以轻松地实现 el-table 组件中连续相同列值合并单元格的功能，从而使表格数据更加清晰易懂。</p>
<p><strong>注意：</strong> 实际应用中，你需要根据自己的需求来调整合并规则。以上示例仅提供了一种可能的实现方式。</p>