vxe 表格 合并行+分页组件完整代码

以下是一个使用VXE表格库的合并行和分页组件的完整代码示例：

<template>
  <div>
    <vxe-table
      :data="dataList"
      :merge-cells="mergeCells"
      :merge-key-columns="['name']"
      :custom-config="{showOverflow: false}"
      :pager-config="pagerConfig"
    >
      <vxe-table-column type="index" title="序号" width="80"></vxe-table-column>
      <vxe-table-column prop="name" title="姓名" width="120"></vxe-table-column>
      <vxe-table-column prop="age" title="年龄" width="120"></vxe-table-column>
      <vxe-table-column prop="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import 'vxe-table/lib/style.css';
import { VXETable } from 'vxe-table';
import { Pager } from 'vxe-table';

export default {
  data() {
    return {
      dataList: [
        { name: '张三', age: 18, address: '北京市朝阳区' },
        { name: '李四', age: 20, address: '上海市浦东新区' },
        { name: '王五', age: 22, address: '广州市天河区' },
        { name: '张三', age: 25, address: '深圳市福田区' },
        { name: '李四', age: 30, address: '北京市海淀区' },
        { name: '王五', age: 35, address: '上海市黄浦区' },
      ],
      mergeCells: [
        { row: 0, col: 0, rowspan: 2 },
        { row: 0, col: 1, rowspan: 2 },
        { row: 0, col: 2, rowspan: 2 },
        { row: 0, col: 3, rowspan: 2 },
      ],
      pagerConfig: {
        pageSize: 5,
        currentPage: 1,
        total: 6,
        pageSizes: [5, 10, 20, 50],
      },
    }
  },
  created() {
    VXETable.use(Pager);
  },
}
</script>

在上面的代码中，我们使用了VXE表格库的vxe-table组件来展示表格数据。我们通过dataList来定义表格的数据源。然后使用mergeCells来定义需要合并的单元格，其中row和col表示起始单元格的行和列索引，rowspan表示需要合并的行数。

在分页部分，我们使用了pagerConfig来配置分页组件的相关属性，包括每页显示的数据条数、当前页码、总数据条数和可选的每页显示条数选项。

需要注意的是，我们在created生命周期钩子中引入了Pager组件，这是因为VXE表格库的分页组件需要单独引入使用。

最后，我们可以根据实际需要对表格的列进行配置，如设置列的标题、字段和宽度等。在这个示例中我们使用了vxe-table-column组件来定义表格的列。

此外，记得在代码中引入VXE表格库的CSS样式文件，以确保表格正常显示