vxe 合并列 + 分页组件

VXE（VXETable）是一个基于 Vue.js 的开源数据表格解决方案，提供了丰富的功能和组件，包括合并列和分页组件。

对于合并列，VXE 提供了 merge-cells 属性，可以通过配置表头的 columns 属性来实现列的合并。具体的合并方式可以通过设置 colSpan 和 rowSpan 来控制。

示例代码如下：

<template>
  <vxe-table
    :data="tableData"
    :merge-cells="mergeCellsConfig"
  >
    <vxe-table-column
      type="seq"
      width="60"
    />
    <vxe-table-column
      field="name"
      title="姓名"
      width="150"
    />
    <vxe-table-column
      field="age"
      title="年龄"
      width="150"
    />
    <vxe-table-column
      field="gender"
      title="性别"
      width="150"
    />
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          gender: '男'
        },
        {
          name: '李四',
          age: 22,
          gender: '男'
        },
        {
          name: '王五',
          age: 25,
          gender: '女'
        },
        {
          name: '赵六',
          age: 18,
          gender: '女'
        }
      ],
      mergeCellsConfig: {
        rowSpan: true,
        colSpan: true,
        rowspan: ({ row, rowIndex, column, columnIndex, $rowIndex, $columnIndex }) => {
          if (rowIndex === 0 && columnIndex === 0) {
            return 2
          }
        },
        colspan: ({ row, rowIndex, column, columnIndex, $rowIndex, $columnIndex }) => {
          if (rowIndex === 0 && columnIndex === 0) {
            return 1
          }
        }
      }
    }
  }
}
</script>

对于分页组件，VXE 提供了 Pager 组件，可以通过配置表格的 pager-config 属性来使用分页功能。你可以设置每页显示的数据条数、总数据条数等参数。

示例代码如下：

<template>
  <vxe-table
    :data="tableData"
    :pager-config="pagerConfig"
  >
    <!-- 表格列配置 -->
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pagerConfig: {
        pageSize: 10, // 每页显示的数据条数
        currentPage: 1, // 当前页数
        total: 0, // 数据总条数
        align: 'right', // 分页组件的对齐方式
        background: true // 是否显示背景色
      }
    }
  },
  mounted() {
    // 获取数据总条数
    this.getTotalCount()
    // 获取当前页的数据
    this.getCurrentPageData()
  },
  methods: {
    getTotalCount() {
      // 发起 API 请求获取数据总条数
      // 将返回的数据总条数赋值给 pagerConfig.total
    },
    getCurrentPageData() {
      // 发起 API 请求获取当前页的数据
      // 将返回的数据赋值给 tableData
    }
  }
}
</script>

上述示例代码中，通过调用 API 获取数据总条数和当前页的数据，然后将数据赋值给相应的变量，即可实现分页功能。

以上就是 VXE 合并列和分页组件的简单介绍和示例代码。如果你需要更详细的内容，可以参考 VXE 的官方文档