玩转掘金表格：用一行代码切换每页数量

在掘金的创作者中心，表格默认每页展示10篇文章，这对于想要一次性浏览大量内容的用户来说，有些不够友好。今天，我将向大家介绍一个简单粗暴的方法，用一行代码就能让掘金表格支持切换每页数量，从每页10条增加到20条，甚至更多！

掘金表格的每页数量限制在代码中硬编码，位于/static/js/chunk-vendors.js文件中。我们要做的就是修改这个文件，将每页数量从10改为20或其他你想要的数字。

打开/static/js/chunk-vendors.js文件，搜索"pageSize:10"。你会找到如下代码块：

export function f(t,e){var n=t.state&&t.state.t?$t("table",t.state.t):{};return Yt({methods:{onSearch:function(t){this.$refs.table&&this.$refs.table.loadData(t)},onRefresh:function(t){this.$refs.table&&this.$refs.table.refreshData(t)},onResetFilter:function(t){this.$refs.table&&this.$refs.table.resetFilter(t)},onResetAllFilter:function(t){this.$refs.table&&this.$refs.table.resetAllFilter(t)},toggleColumns:function(t){this.$refs.table&&this.$refs.table.toggleColumns(t)},handleToggle:function(t){this.toggle=t,this.toggleColumns(t)},onPageSizeChange:function(t){this.$refs.table&&this.$refs.table.handlePageSizeChange(t)},onLoadMore:function(t){this.$refs.table&&this.$refs.table.loadMoreData(t)}},mounted:function(){var t=this.layout.dialog,e=t&&t.pageSize;e&&this.$refs.table&&this.$refs.table.pageSize!=e&&this.$refs.table.setPageSize(e)}},render:function(t){var e=this,n=this.layout.dialog,r=n&&n.loading,o=n&&n.loadingText;return this.renderTable(t,{scopedSlots:{dialogBody:function(){return[e.renderSearch(t),e.renderTableContent(t)]},tableTitle:function(){var n=e.titleText||"",r=this.columns,o=(r||[]).some(function(t){return t.filters&&t.filters.length});return[e.renderTitle(t,n),e.renderFilters(t,o),e.renderPageSize(t)]},pager:function(){return e.renderPager(t)}},on:{dialogMounted:function(){this.clear=!1},reload:function(t){this.reloadHandler=t},tableReady:function(){if(n&&n.tableType)this.$refs.table&&this.$refs.table.initCallback()},tableRefresh:function(){this.$refs.table&&this.$refs.table.onRefresh()},tableFilter:function(t){this.$refs.table&&this.$refs.table.handleFilter(t)},tableSort:function(t){this.$refs.table&&this.$refs.table.handleSort(t)},tableSelected:function(t){this.onTableRowSelect(t)},tableOperate:function(t,e){this.onTableOperate(t,e)},tablePageChange:function(t){this.onPageChange(t)},tablePageSizeChange:function(t){this.pageSizeHandler&&this.pageSizeHandler(t)}})},components:{dialogView:this.dialogView,selectTableType:this.selectTableType,search:this.search,filters:this.filters,table:this.table,tableWrapper:this.tableWrapper,pager:this.pager,timeRange:this.timeRange,datePicker:this.datePicker,multiSelect:this.multiSelect,multiSwitch:this.multiSwitch,tableSorter:this.tableSorter,tableToggle:this.tableToggle},watch:{layout:function(t){t&&t.dialog&&t.dialog.pageSize&&this.$refs.table&&this.$refs.table.pageSize!=t.dialog.pageSize&&this.$refs.table.setPageSize(t.dialog.pageSize)},"layout.dialog.pageSize":function(t){t&&this.$refs.table&&this.$refs.table.pageSize!=t&&this.$refs.table.setPageSize(t)},tableType:function(){this.$refs.table&&this.$refs.table.clearSelected&&this.$refs.table.clearSelected()},"layout.dialog.loading":function(t){t&&(this.loading=t,this.$refs.table&&this.$refs.table.reload())},clear:function(t){t&&this.$refs.table&&this.$refs.table.clearSelected()}}});

将"pageSize:10"替换为"pageSize:20"或你想要的任何数字，例如：

export function f(t,e){var n=t.state&&t.state.t?$t("table",t.state.t):{};return Yt({methods:{onSearch:function(t){this.$refs.table&&this.$refs.table.loadData(t)},onRefresh:function(t){this.$refs.table&&this.$refs.table.refreshData(t)},onResetFilter:function(t){this.$refs.table&&this.$refs.table.resetFilter(t)},onResetAllFilter:function(t){this.$refs.table&&this.$refs.table.resetAllFilter(t)},toggleColumns:function(t){this.$refs.table&&this.$refs.table.toggleColumns(t)},handleToggle:function(t){this.toggle=t,this.toggleColumns(t)},onPageSizeChange:function(t){this.$refs.table&&this.$refs.table.handlePageSizeChange(t)},onLoadMore:function(t){this.$refs.table&&this.$refs.table.loadMoreData(t)}},mounted:function(){var t=this.layout.dialog,e=t&&t.pageSize;e&&this.$refs.table&&this.$refs.table.pageSize!=e&&this.$refs.table.setPageSize(e)}},render:function(t){var e=this,n=this.layout.dialog,r=n&&n.loading,o=n&&n.loadingText;return this.renderTable(t,{scopedSlots:{dialogBody:function(){return[e.renderSearch(t),e.renderTableContent(t)]},tableTitle:function(){var n=e.titleText||"",r=this.columns,o=(r||[]).some(function(t){return t.filters&&t.filters.length});return[e.renderTitle(t,n),e.renderFilters(t,o),e.renderPageSize(t)]},pager:function(){return e.renderPager(t)}},on:{dialogMounted:function(){this.clear=!1},reload:function(t){this.reloadHandler=t},tableReady:function(){if(n&&n.tableType)this.$refs.table&&this.$refs.table.initCallback()},tableRefresh:function(){this.$refs.table&&this.$refs.table.onRefresh()},tableFilter:function(t){this.$refs.table&&this.$refs.table.handleFilter(t)},tableSort:function(t){this.$refs.table&&this.$refs.table.handleSort(t)},tableSelected:function(t){this.onTableRowSelect(t)},tableOperate:function(t,e){this.onTableOperate(t,e)},tablePageChange:function(t){this.onPageChange(t)},tablePageSizeChange:function(t){this.pageSizeHandler&&this.pageSizeHandler(t)}})},components:{dialogView:this.dialogView,selectTableType:this.selectTableType,search:this.search,filters:this.filters,table:this.table,tableWrapper:this.tableWrapper,pager:this.pager,timeRange:this.timeRange,datePicker:this.datePicker,multiSelect:this.multiSelect,multiSwitch:this.multiSwitch,tableSorter:this.tableSorter,tableToggle:this.tableToggle},watch:{layout:function(t){t&&t.dialog&&t.dialog.pageSize&&this.$refs.table&&this.$refs.table.pageSize!=t.dialog.pageSize&&this.$refs.table.setPageSize(t.dialog.pageSize)},"layout.dialog.pageSize":function(t){t&&this.$refs.table&&this.$refs.table.pageSize!=t&&this.$refs.table.setPageSize(t)},tableType:function(){this.$refs.table&&this.$refs.table.clearSelected&&this.$refs.table.clearSelected()},"layout.dialog