el-table 合并行 前端分页

`el-table` 是 Element UI 中的一个表格组件，它提供了一种便捷的方式来展示数据，并支持合并单元格和前端分页功能。

- **合并行**（Row Merge）：在 `el-table` 中，你可以通过设置列属性 `merge-header` 和 `merge-cell` 来合并行。`merge-header` 控制是否合并表头，`merge-cell` 则用于指定哪些列的数据可以被合并。例如，如果你有一个员工列表，你可以合并同名或同职位的员工信息，使得显示更简洁。

- **前端分页**（Client-side Pagination）：`el-table` 的 `data` 属性通常是动态加载的，而 `page-size` 和 `current-page` 等属性允许你在前端控制分页。当用户翻页时，不需要向服务器发送新的请求，而是直接从 `data` 数组中切片出对应页的数据。这提高了性能，特别是在数据量大时。

使用示例：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    border
    highlight-current-row
    @selection-change="handleSelectionChange">
    <!-- ...配置列和合并行... -->
    <el-table-column type="index" width="60"></el-table-column>
    <el-table-column label="姓名" prop="name" header-align="center" merge-header></el-table-column>
    <!-- ...其他列... -->
    <el-table-column type="selection" width="55"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...], // 分页后的数据源
      currentPage: 1,
      pageSize: 10,
    };
  },
  methods: {
    handleSelectionChange selection) {
      console.log('当前选中的行', selection);
    }
  },
};
</script>