VXE 表格：合并列和分页组件使用指南

VXE(VXETable) \u662F\u4E00\u4E2A\u57FA\u4E8E Vue.js\u7684\u5F00\u6E90\u6570\u636E\u8868\u683C\u89E3\u51B3\u65B9\u6848\xFF0C\u63D0\u4F9B\u4E86\u5B9C\u5C45\u7684\u529F\u80FD\u548C\u7EC4\u4EF6\xFF0C\u5305\u62EC\u5408\u5E76\u5217\u548C\u5206\u9875\u7EC4\u4EF6\u3002\n\n\u5BF9\u4E8E\u5408\u5E76\u5217\xFF0C VXE \u63D0\u4F9B\u4E86 merge-cells \u5C5E\u6027\xFF0C\u53EF\u4EE5\u901A\u8FC7\u914D\u7F6E\u8868\u5934\u7684 columns \u5C5E\u6027\u6765\u5B9E\u73B0\u5217\u7684\u5408\u5E76\u3002\u5177\u4F53\u7684\u5408\u5E76\u65B9\u5F0F\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E colSpan \u548C rowSpan \u6765\u63A7\u5236\u3002\n\n\u793A\u4F8B\u4EE3\u7801\u5982\u4E0B\uFF1A\n\nhtml\n<template>\n <vxe-table\n :data="tableData"\n :merge-cells="mergeCellsConfig"\n >\n <vxe-table-column\n type="seq"\n width="60"\n />\n <vxe-table-column\n field="name"\n title="\u59D3\u540D"\n width="150"\n />\n <vxe-table-column\n field="age"\n title="\u5E74\u9F84"\n width="150"\n />\n <vxe-table-column\n field="gender"\n title="\u6027\u522B"\n width="150"\n />\n </vxe-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n name: '\u5F20\u4E09',\n age: 20,\n gender: '\u7537'\n },\n {\n name: '\u674E\u56DB',\n age: 22,\n gender: '\u7537'\n },\n {\n name: '\u738B\u4E94',\n age: 25,\n gender: '\u5973'\n },\n {\n name: '\u8096\u516D',\n age: 18,\n gender: '\u5973'\n }\n ],\n mergeCellsConfig: {\n rowSpan: true,\n colSpan: true,\n rowspan: ({ row, rowIndex, column, columnIndex, $rowIndex, $columnIndex }) => {\n if (rowIndex === 0 && columnIndex === 0) {\n return 2\n }\n },\n colspan: ({ row, rowIndex, column, columnIndex, $rowIndex, $columnIndex }) => {\n if (rowIndex === 0 && columnIndex === 0) {\n return 1\n }\n }\n }\n }\n }\n }\n</script>\n\n\n\u5BF9\u4E8E\u5206\u9875\u7EC4\u4EF6\xFF0C VXE \u63D0\u4F9B\u4E86 Pager \u7EC4\u4EF6\xFF0C\u53EF\u4EE5\u901A\u8FC7\u914D\u7F6E\u8868\u683C\u7684 pager-config \u5C5E\u6027\u6765\u4F7F\u7528\u5206\u9875\u529F\u80FD\u3002\u4F60\u53EF\u4EE5\u8BBE\u7F6E\u6BCF\u9875\u663E\u793A\u7684\u6570\u636E\u6761\u6570\u3001\u603B\u6570\u636E\u6761\u6570\u7B49\u53C2\u6570\u3002\n\n\u793A\u4F8B\u4EE3\u7801\u5982\u4E0B\uFF1A\n\nhtml\n<template>\n <vxe-table\n :data="tableData"\n :pager-config="pagerConfig"\n >\n \n </vxe-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [],\n pagerConfig: {\n pageSize: 10, // \u6BCF\u9875\u663E\u793A\u7684\u6570\u636E\u6761\u6570\n currentPage: 1, // \u5F53\u524D\u9875\u6570\n total: 0, // \u6570\u636E\u603B\u6761\u6570\n align: 'right', // \u5206\u9875\u7EC4\u4EF6\u7684\u5BF9\u9F50\u65B9\u5F0F\n background: true // \u662F\u5426\u663E\u793A\u80CC\u666F\u8272\n }\n }\n },\n mounted() {\n // \u83B7\u53D6\u6570\u636E\u603B\u6761\u6570\n this.getTotalCount()\n // \u83B7\u53D6\u5F53\u524D\u9875\u7684\u6570\u636E\n this.getCurrentPageData()\n },\n methods: {\n getTotalCount() {\n // \u53D1\u8D77 API \u8BF7\u6C42\u83B7\u53D6\u6570\u636E\u603B\u6761\u6570\n // \u5C06\u8FD4\u56DE\u7684\u6570\u636E\u603B\u6761\u6570\u8D4B\u503C\u7ED9 pagerConfig.total\n },\n getCurrentPageData() {\n // \u53D1\u8D77 API \u8BF7\u6C42\u83B7\u53D6\u5F53\u524D\u9875\u7684\u6570\u636E\n // \u5C06\u8FD4\u56DE\u7684\u6570\u636E\u8D4B\u503C\u7ED9 tableData\n }\n }\n }\n</script>\n\n\n\u4E0A\u8FF0\u793A\u4F8B\u4EE3\u7801\u4E2D\xFF0C\u901A\u8FC7\u8C03\u7528 API \u83B7\u53D6\u6570\u636E\u603B\u6761\u6570\u548C\u5F53\u524D\u9875\u7684\u6570\u636E\xFF0C\u7136\u540E\u5C06\u6570\u636E\u8D4B\u503C\u7ED9\u5BF9\u5E94\u7684\u53D8\u91CF\xFF0C\u5C31\u53EF\u4EE5\u5B9E\u73B0\u5206\u9875\u529F\u80FD\u3002\n\n\u4EE5\u4E0A\u5C31\u662F VXE \u5408\u5E76\u5217\u548C\u5206\u9875\u7EC4\u4EF6\u7684\u7B80\u5355\u4ECB\u7ECD\u548C\u793A\u4F8B\u4EE3\u7801\u3002\u5982\u679C\u4F60\u9700\u8981\u66F4\u8BE6\u7EC6\u7684\u5185\u5BB9\xFF0C\u53EF\u4EE5\u53C2\u8003 VXE\u7684\u5B98\u65B9\u6587\u6863\u3002