Vue Ant Design Vue table pagination - 表格分页 - 附完整示例

目录

效果

一、介绍

1、官方文档：Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

2、官方示例

二、准备工作

1、安装依赖包

2、示例版本

三、使用步骤

1、在main.ts引入

2、具体使用

四、完整示例

1、main.ts

2、example.vue

 欢迎扫描下方二维码关注VX公众号

---

效果

一、介绍

1、官方文档：Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.jsAn enterprise-class UI components based on Ant Design and Vuehttps://3x.antdv.com/components/pagination-cn/

2、官方示例

二、准备工作

1、安装依赖包

# 选择一个你喜欢的包管理器

# NPM
$npm install ant-design-vue --save

#Yarn
$ yarn add ant-design-vue

注：也可以在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 antd。

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

2、示例版本

"ant-design-vue": "^3.2.12",

三、使用步骤

1、在main.ts引入

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

app.use(Antd);

2、具体使用

  const page = ref(1);
  const pageSize = ref(2);
  const totals = ref(0);
  const paginationProp = ref({
    showSizeChanger: true, // 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
    showQuickJumper: true, // 是否可以快速跳转至某页
    pageSize, // 每页条数
    current: page, // 当前页数
    total: totals, // 数据总数
    showTotal: (totals) => `总 ${totals} 条数据`, // 用于显示数据总量和当前数据顺序
    onChange: pageChange, // 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
    onShowSizeChange: pageSizeChange, // pageSize 变化的回调
    pageSizeOptions: ['2', '3'], // 指定每页可以显示多少条
  });

四、完整示例

1、main.ts

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App);
app.use(Antd);
app.mount("#app");

2、example.vue

<template>
  <a-table
    :columns="columns"
    :data-source="tableData"
    bordered
    size="small"
    :pagination="paginationProp" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: '身高',
      dataIndex: 'height', 
      ellipsis: true,
    },
    {
      title: '体重',
      dataIndex: 'weight',
      ellipsis: true,
    },
  ];
  const tableData = ref<any>([
    {
      key: '1',
      name: '张三',
      height: 180,
      weight: 165,
    },
    {
      key: '2',
      name: '李四',
      height: 178,
      weight: 146,
    },
    {
      key: '3',
      name: '王五',
      height: 182,
      weight: 168,
    },
    {
      key: '4',
      name: '赵六',
      height: 185,
      weight: 160,
    },
  ]);

  // 分页相关
  const page = ref(1);
  const pageSize = ref(2);
  const totals = ref(0);
  const paginationProp = ref({
    showSizeChanger: true, // 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
    showQuickJumper: true, // 是否可以快速跳转至某页
    pageSize, // 每页条数
    current: page, // 当前页数
    total: totals, // 数据总数
    showTotal: (totals) => `总 ${totals} 条数据`, // 用于显示数据总量和当前数据顺序
    onChange: pageChange, // 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
    onShowSizeChange: pageSizeChange, // pageSize 变化的回调
    pageSizeOptions: ['2', '3'], // 指定每页可以显示多少条
  });

  function pageChange(p, pz) {
    page.value = p;
    pageSize.value = pz;
    getDataList();
  }
  function pageSizeChange(current, size) {
    page.value = current;
    pageSize.value = size;
    getDataList();
  }

  function getDataList() {
    // 获取表格数据的接口地址({pageNo: page.value, pageSize: pageSize.value }).then((data) => {
    //   const { current, pages, size, total, records } = data
    //   if(current > pages) {
    //     page.value = pages;
    //     getDataList();
    //   } else {
    //     tableData.value = records;
    //     pageSize.value = size;
    //     totals.value = total;
    //   }      
    // })
  }

  // getDataList();

</script>

<style scoped>
  :deep() .ant-table-cell {
    text-align: center !important;
  }
  
  :deep() .ant-table-pagination.ant-pagination {
    margin: 10px 0 0 0 !important;
  }
</style>

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

 欢迎扫描下方二维码关注VX公众号