ElementUI Table 组件实现跨行表头合并及隐藏重复行方案

跨行表头合并实现方案

ElementUI 的 Table 组件提供了 header-cell-style 和 header-cell-class-name 属性来实现表头单元格的样式控制，结合这些可以实现跨行表头合并效果。

方法一：使用 span-method 属性

<el-table
  :data="tableData"
  :span-method="arraySpanMethod"
  border
  style="width: 100%">
  <!-- 表格列定义 -->
</el-table>

methods: {
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if (rowIndex === 0) {
      if (columnIndex === 0) {
        return [1, 2]; // 第一行第一列跨2列
      } else if (columnIndex === 1) {
        return [0, 0]; // 第一行第二列隐藏
      }
    }
  }
}

方法二：使用 CSS 实现视觉合并

<el-table
  :data="tableData"
  :header-cell-style="headerCellStyle"
  border
  style="width: 100%">
  <!-- 表格列定义 -->
</el-table>

methods: {
  headerCellStyle({ row, column, rowIndex, columnIndex }) {
    if (rowIndex === 0 && columnIndex === 0) {
      return {
        'text-align': 'center',
        'position': 'relative',
        '&::after': {
          content: '""',
          position: 'absolute',
          right: '-1px',
          top: '50%',
          height: '1px',
          width: '100%',
          background: '#fff'
        }
      }
    }
  }
}

隐藏重复行实现方案

方法一：使用 row-class-name 和 CSS

<el-table
  :data="tableData"
  :row-class-name="tableRowClassName"
  border
  style="width: 100%">
  <!-- 表格列定义 -->
</el-table>

methods: {
  tableRowClassName({ row, rowIndex }) {
    if (this.shouldHideRow(row, rowIndex)) {
      return 'hidden-row';
    }
    return '';
  },
  shouldHideRow(row, rowIndex) {
    // 根据业务逻辑判断是否需要隐藏该行
    if (rowIndex > 0 && row.someField === this.tableData[rowIndex - 1].someField) {
      return true;
    }
    return false;
  }
}

// CSS
.hidden-row {
  display: none;
}

方法二：预处理数据过滤重复行

computed: {
  processedTableData() {
    const result = [];
    let lastRow = null;

    this.tableData.forEach(row => {
      if (!lastRow || !this.isDuplicateRow(row, lastRow)) {
        result.push(row);
        lastRow = row;
      }
    });

    return result;
  }
},
methods: {
  isDuplicateRow(row1, row2) {
    // 定义判断重复行的逻辑
    return row1.field1 === row2.field1 && row1.field2 === row2.field2;
  }
}

综合解决方案

结合上述方法，可以实现一个既支持跨行表头又支持隐藏重复行的表格：

<template>
  <el-table
    :data="processedTableData"
    :span-method="arraySpanMethod"
    :row-class-name="tableRowClassName"
    border
    style="width: 100%">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></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: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '李小龙', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-01', name: '张小三', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-01', name: '张小三', address: '上海市普陀区金沙江路 1518 弄' }
      ]
    }
  },
  computed: {
    processedTableData() {
      const result = [];
      let lastRow = null;

      this.tableData.forEach(row => {
        if (!lastRow || !this.isDuplicateRow(row, lastRow)) {
          result.push(row);
          lastRow = row;
        }
      });

      return result;
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 实现跨行表头逻辑
      if (rowIndex === 0 && columnIndex === 0) {
        return [1, 2];
      } else if (rowIndex === 0 && columnIndex === 1) {
        return [0, 0];
      }
    },
    tableRowClassName({ row, rowIndex }) {
      // 如果需要额外的行隐藏逻辑
      return '';
    },
    isDuplicateRow(row1, row2) {
      // 定义判断重复行的逻辑
      return row1.date === row2.date && row1.name === row2.name && row1.address === row2.address;
    }
  }
}
</script>

<style>
.hidden-row {
  display: none;
}
</style>

注意事项

1. 使用 span-method 方法时，隐藏的单元格需要返回 [0, 0]
2. 预处理数据方法性能更好，适合大数据量场景
3. CSS 方法只是视觉上隐藏，数据仍然存在
4. 跨行表头可能会影响表格的排序和筛选功能
5. 在复杂表头情况下，可能需要结合多级表头 (el-table-column 嵌套) 来实现更复杂的效果

希望这些方案能帮助你优雅地实现 ElementUI Table 组件的跨行表头合并和隐藏重复行功能。