vue3+ts分页组件及分页设置

前言

所用组件是antd3。
中文支持：

import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

---

一、组件

对表格数据进行分页展示，一定不要忘了加红框标记的

<template>
    <a-config-provider :locale="locale">
      <a-table :columns="columns" :data-source="data.tabledata" :scroll="{ x:'100%', y:500 }"
       class="ant-table-striped" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
       :pagination="pagination" @change="changePageIndex">
      </a-table>
      </a-config-provider>
</template>    

二、函数声明

代码如下（示例）：

//组件字体中文
const locale = ref(zhCN);
//表格data
let data = ref({
  tabledata: [],
  conditions: '',
})
//分页组件初始化
const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
  pageSizeOptions: ['10', '15', '20'],
  showTotal: function (total: number, range: any) {
    if (range[0] == range[1])
      return `第${range[0]}条/总共${total}条`;
    else
      return `第${range[0]}-${range[1]}条/总共${total}条`;
  },
  showSizeChanger: true
});
//获取表格列表信息（附带查询条件的），只看pagination部分即可
const loadData = () => {
  getFileList({
    code: data.value.conditions,
    name: data.value.conditions,
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
  }).then((list) => {
    pagination.total = list.result.total;
    pagination.current = list.result.pageIndex;
    pagination.pageSize = list.result.pageSize;
    list.result.data.forEach(ele => {
      datalist.push(ele);
      ele.downloadStatus = false;
      return ele;
    })
    for (let i = 0; i < datalist.length; i++) {
      if (datalist[i].dataSize < 1024 * 1024) {
        datalist[i].dataSize = (datalist[i].dataSize / 1024).toFixed(2) + 'KB'
      } else if (1024 * 1024 < datalist[i].dataSize && datalist[i].dataSize < 1024 * 1024 * 1024) {
        datalist[i].dataSize = (datalist[i].dataSize / (1024 * 1024)).toFixed(2) + 'M'
      } else if (1024 * 1024 * 1024 < datalist[i].dataSize) {
        datalist[i].dataSize = (datalist[i].dataSize / (1024 * 1024 * 1024)).toFixed(2) + 'G'
      }
    }
    data.value.tabledata = list.result.data;
  })
}
//分页改变时调用
const changePageIndex = (pageObject: any) => {
  pagination.pageSize = pageObject.pageSize;
  pagination.current = pageObject.current;
  loadData()
}

效果如下：