标签：current pagination loading pageSize value Ant Design total data

效果：

代码：

 <a-table
    :columns="columns"
    :data-source="dataSource"
    :rowKey="(record) => record.id"
    :pagination="pagination"
    :loading="loading"
    :scroll="{ x: '100%', y: 530 }"
    @change="handleTableChange"
  ></a-table>

import { message } from "ant-design-vue";
import { computed, defineComponent, ref } from "vue";
export default defineComponent({
    name: "table",
    setup() {
        // 获取列表数据
        getDataList = async () => {
            loading.value = true
            const param = {
            };
            let res = await getPressureStationDataList(param);
            const { status, data, msg } = res;
            if (status !== 200) {
                message.error(msg);
                return;
            } else {
                dataSource.value = data.result;
                total.value = data.totalRows;
                current.value = data.pageIndex;
                pageSize.value = data.pageSize;
            }
            loading.value = false
        };
        //调用列表
        getDataList();
            // 列表分页
        const pagination = computed(() => ({
            total: total.value,
            current: current.value,
            pageSize: pageSize.value,
            showTotal:  total =>`总共 ${total} 项`,
            defaultPageSize: 10,
            // pageSizeOptions: ['5', '10', '15', '20'], // 可不设置使用默认
            showSizeChanger:true, // 是否显示pagesize选择
            showQuickJumper: true, // 是否显示跳转窗
        }));
        // 列表当前页更改
        const handleTableChange = (pag, filters, sorter) => {
            current.value = pag.current;
            pageSize.value = pag.pageSize;
            getDataList();
        };

        return {
            dataSource,
            pagination,
            loading,
        }
    }
}

标签：current,pagination,loading,pageSize,value,Ant,Design,total,data
来源： https://blog.csdn.net/qq_38987146/article/details/121233438

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。