灵活掌握el-table合并列，打造整齐美观的表格

el-table是一款功能强大的表格组件，它提供了丰富的功能来满足各种复杂的表格展示需求。其中，合并列功能可以将表格中相邻的单元格合并为一个单元格，从而实现跨行或跨列的展示效果。这在展示具有层次结构的数据时非常有用，可以使表格更加清晰易读。

步骤 1：导入 el-table

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="category" label="类别"></el-table-column>
    <el-table-column prop="price" label="价格"></el-table-column>
  </el-table>
</template>

import { ElTable, ElTableColumn } from 'element-plus'

export default {
  components: {
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      tableData: [
        { name: '苹果', category: '水果', price: 10 },
        { name: '香蕉', category: '水果', price: 20 },
        { name: '橙子', category: '水果', price: 30 },
        { name: '桌子', category: '家具', price: 100 },
        { name: '椅子', category: '家具', price: 200 },
        { name: '沙发', category: '家具', price: 300 }
      ]
    }
  }
}

步骤 2：设置合并列

在设置合并列时，您需要指定要合并的单元格的范围。可以使用 rowSpan 和 colSpan 属性来控制合并的范围。

rowSpan 属性指定要合并的单元格的行数，而 colSpan 属性指定要合并的单元格的列数。例如，要将表格中的第 1 行和第 2 行的第 2 列和第 3 列合并为一个单元格，您可以使用以下代码：

<el-table-column prop="category" label="类别" rowSpan="2" colSpan="2"></el-table-column>

步骤 3：优化代码

上面的代码中，我们使用了两个属性 rowSpan 和 colSpan 来设置合并列。这在简单的合并列场景下是可行的，但当需要合并多个单元格或合并列的范围比较复杂时，这种写法会变得非常冗长。

为了优化代码，我们可以使用 span-method 属性来设置合并列。span-method 属性是一个函数，它接受两个参数：行索引和列索引。函数的返回值是一个对象，包含 rowspan 和 colspan 两个属性，用于指定要合并的单元格的范围。

例如，要将表格中的第 1 行和第 2 行的第 2 列和第 3 列合并为一个单元格，我们可以使用以下代码：

<el-table-column prop="category" label="类别" :span-method="spanMethod"></el-table-column>

spanMethod(row, column) {
  if (row === 0) {
    return {
      rowspan: 2,
      colspan: 2
    }
  }
}

步骤 4：样式调整

合并列后，您可能需要调整合并单元格的样式。您可以使用 CSS 来调整合并单元格的字体大小、颜色、边框等样式。

例如，以下 CSS 代码可以将合并单元格的字体大小设置为 18px，颜色设置为红色：

.el-table-cell--span {
  font-size: 18px;
  color: red;
}

步骤 5：应用合并列

现在，您已经学会了如何在 el-table 中合并列。您可以将这些技巧应用到您的项目中，以创建更美观、更易读的表格。