分页

配置全局字段

可以在使用 vue-table-view 时，对全局使用同一套的分页处理字段

import Vue from 'vue';
import VueTableView, { defineVueTableViewGlobalOption } from 'vue-table-view';

Vue.use(VueTableView, defineVueTableViewGlobalOption({
  requestPageConfig: {
    currentPage: 'pageNum',
    perPage: 'pageSize',
    pageSizes: [10, 20, 30, 40, 50, 100]
  },
  receivePageConfig: {
    currentPage: 'pageNum',
    perPage: 'pageSize',
    currentPageSize: 'size',
    total: 'total',
    pages: 'pages',
    list: 'list'
  }
}));

请求 分页字段的具体配置说明请见 这里

响应 分页字段的具体配置说明请见 这里

配置组件字段

因为对于前端工程来讲，可能会同时接入多个不同的后端API，所以 vue-table-view 允许开发者在不同视图中配置不同的分页处理字段

TIP

视图内配置项会与全局配置深度合并，所以可以只将与全局配置不同的的项列出即可

import type { Config } from 'vue-table-view';

const config: Config<Record<string, unknown>> = {
  requestPageConfig: {
    currentPage: 'currPage',
    perPage: 'perPage',
  },
  receivePageConfig: {
    currentPage: 'currPage',
    perPage: 'perPage',
    currentPageSize: 'pageSize',
    list: 'dataList'
  }
};

配置项同上方 配置全局字段

显隐控制

分页可以在有多页数据的表格视图中使用。也可以在不需要分页的视图中设置不显示，只需要配置：

import type { Config } from 'vue-table-view';

const config: Config<Record<string, unknown>> = {
  needPagination: false
};