巧用Element UI Table：轻松合并多行数据

概述

在前端开发中，我们经常需要在表格中合并单元格，以实现数据的合并或分组显示。Element UI Table 提供了两种不同的方法来实现多行数据的合并：

1. 使用 slot 自定义合并单元格
2. 使用 colspan 属性合并单元格

这两种方法各有优缺点，您可以根据自己的需求选择合适的方法。

使用 slot 自定义合并单元格

Element UI Table 提供了一个名为 default 的 slot，允许您自定义单元格的显示内容。我们可以利用这个 slot 来实现多行数据的合并。

首先，我们需要在 Table 组件中定义一个 slot-scope 属性，并在其中传入要合并单元格的行数据。然后，在 slot 中使用 v-for 指令循环遍历行数据，并使用 rowspan 属性来指定单元格的行跨度。

<el-table :data="tableData">
  <el-table-column prop="name">
    <template slot-scope="scope">
      <span v-for="row in scope.row.children" :rowspan="row.rowspan">{{ row.name }}</span>
    </template>
  </el-table-column>
</el-table>

const tableData = [
  {
    name: '父项 1',
    children: [
      { name: '子项 1-1', rowspan: 2 },
      { name: '子项 1-2' },
    ]
  },
  {
    name: '父项 2',
    children: [
      { name: '子项 2-1' },
      { name: '子项 2-2' },
    ]
  },
];

这种方法的优点是，它可以实现任意行的合并，并且可以自定义合并单元格的内容。缺点是，代码相对复杂，需要对 Element UI 的 slot 机制有一定的了解。

使用 colspan 属性合并单元格

Element UI Table 也支持使用 colspan 属性来合并单元格。colspan 属性指定了单元格的列跨度。

<el-table :data="tableData">
  <el-table-column prop="name" :colspan="2">
    <template slot-header>
      <span>父项</span>
    </template>
  </el-table-column>
  <el-table-column prop="child1">
    <template slot-header>
      <span>子项 1</span>
    </template>
  </el-table-column>
  <el-table-column prop="child2">
    <template slot-header>
      <span>子项 2</span>
    </template>
  </el-table-column>
</el-table>

const tableData = [
  { name: '父项 1', child1: '子项 1-1', child2: '子项 1-2' },
  { name: '父项 2', child1: '子项 2-1', child2: '子项 2-2' },
];

这种方法的优点是，代码简单，容易理解。缺点是，只能合并相邻的单元格，并且无法自定义合并单元格的内容。

总结

Element UI Table 提供了两种不同的方法来实现多行数据的合并：使用 slot 自定义合并单元格和使用 colspan 属性合并单元格。这两种方法各有优缺点，您可以根据自己的需求选择合适的方法。

希望本教程对您有所帮助，如果您还有其他问题，请随时留言。