ElementUI Table 表头如何优雅合并：如何实现跨行合并并只显示“类别”的最后一行？

在 ElementUI 的 Table 组件中，表头的合并可以通过 header-cell-style 和 header-cell-class-name 属性来实现。要实现跨行合并并只显示“类别”的最后一行，可以通过以下步骤来实现：

1. 使用 header-cell-style 和 header-cell-class-name 控制样式

首先，我们需要通过 header-cell-style 和 header-cell-class-name 来控制表头单元格的样式，使其在某些情况下隐藏或合并。

2. 使用 span-method 方法

span-method 是 ElementUI Table 组件中的一个方法，用于合并单元格。我们可以利用这个方法来实现表头的跨行合并。

3. 实现代码示例

以下是一个示例代码，展示如何实现跨行合并并只显示“类别”的最后一行：

<template>
  <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    :header-cell-style="headerCellStyle"
    :header-cell-class-name="headerCellClassName"
    border
    style="width: 100%">
    <el-table-column
      prop="category"
      label="类别"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { category: '水果', name: '苹果', address: '北京' },
        { category: '水果', name: '香蕉', address: '上海' },
        { category: '蔬菜', name: '胡萝卜', address: '广州' },
        { category: '蔬菜', name: '西红柿', address: '深圳' }
      ]
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex === 1) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 2) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex === 3) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 && rowIndex === 1) {
        return {
          display: 'none'
        };
      }
    },
    headerCellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 && rowIndex === 1) {
        return 'hidden-header';
      }
    }
  }
};
</script>

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

4. 解释

• arraySpanMethod: 这个方法用于合并单元格。我们通过判断 rowIndex 和 columnIndex 来决定哪些单元格需要合并。
• headerCellStyle: 这个方法用于动态设置表头单元格的样式。我们通过判断 columnIndex 和 rowIndex 来决定哪些表头单元格需要隐藏。
• headerCellClassName: 这个方法用于动态设置表头单元格的类名。我们通过判断 columnIndex 和 rowIndex 来决定哪些表头单元格需要隐藏。

5. 结果

通过上述代码，我们实现了表头的跨行合并，并且只显示“类别”的最后一行。其他行的“类别”单元格将被隐藏或合并。

6. 注意事项

• 这种方法适用于表头行数较少的情况。如果表头行数较多，可能需要更复杂的逻辑来处理合并和隐藏。
• 如果需要更复杂的表头合并，可以考虑使用自定义表头组件来实现。

希望这个解决方案能帮助你优雅地实现 ElementUI Table 表头的跨行合并！