VXE表格合并行+分页组件完整代码示例 - 如何使用VXE Table实现表格合并与分页
<p>"""\n<template>\n <div>\n <vxe-table\n :data="dataList"\n :merge-cells="mergeCells"\n :merge-key-columns="['name']"\n :custom-config="{showOverflow: false}"\n :pager-config="pagerConfig"\n >\n <vxe-table-column type="index" title="序号" width="80" />\n <vxe-table-column prop="name" title="姓名" width="120" />\n <vxe-table-column prop="age" title="年龄" width="120" />\n <vxe-table-column prop="address" title="地址" />\n </vxe-table>\n </div>\n</template>\n\n<script>\nimport 'vxe-table/lib/style.css';\nimport { VXETable } from 'vxe-table';\nimport { Pager } from 'vxe-table';\n\nexport default {\n data() {\n return {\n dataList: [\n { name: '张三', age: 18, address: '北京市朝阳区' },\n { name: '李四', age: 20, address: '上海市浦东新区' },\n { name: '王五', age: 22, address: '广州市天河区' },\n { name: '张三', age: 25, address: '深圳市福田区' },\n { name: '李四', age: 30, address: '北京市海淀区' },\n { name: '王五', age: 35, address: '上海市黄浦区' },\n ],\n mergeCells: [\n { row: 0, col: 0, rowspan: 2 },\n { row: 0, col: 1, rowspan: 2 },\n { row: 0, col: 2, rowspan: 2 },\n { row: 0, col: 3, rowspan: 2 },\n ],\n pagerConfig: {\n pageSize: 5,\n currentPage: 1,\n total: 6,\n pageSizes: [5, 10, 20, 50],\n },\n }\n },\n created() {\n VXETable.use(Pager);\n },\n}\n</script>\n"""\n\n在本示例中，我们使用<code>vxe-table</code>组件展示表格数据，并通过<code>dataList</code>定义数据源。<code>mergeCells</code>用于配置单元格合并，<code>row</code>和<code>col</code>表示起始单元格的行列索引，<code>rowspan</code>表示合并的行数。\n\n<code>pagerConfig</code>配置分页组件属性，包括每页显示数据条数、当前页码、总数据条数和可选每页显示条数选项。\n\n在<code>created</code>生命周期中引入<code>Pager</code>组件，因为VXE表格库的分页组件需要单独引入。\n\n您也可以根据需要自定义表格列，例如设置列标题、字段和宽度等。在本示例中，我们使用<code>vxe-table-column</code>组件定义表格列。\n\n最后，记得引入VXE表格库的CSS样式文件，确保表格正常显示。</p>
原文地址: https://www.cveoy.top/t/topic/pGKS 著作权归作者所有。请勿转载和采集!