ant desgin vue 列表分页

ant desgin vue 表格列表分页

1、html代码块：记得把这个表格自带的分页关闭了:pagination="false"

<!-- 表格 -->
        <div class="admin_table_list">
            <a-table bordered :rowkey="id"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                :data-source="orderList" :pagination="false" :scroll="{x:750 | true, y: 440 }" size="small">
                <a slot="seriainumber">{{orderList[index]}}</a>
                <a slot="action" href="javascript:;" slot-scope="text,record" @click="onSee(record)">查看</a>
            </a-table>
        </div>

        <!-- 分页 -->
        <div style="margin-top: 15px;text-align: right;">
            <template>
                <a-pagination v-model="current" :page-size-options="pageSizeOptions" :total="total" show-size-changer
                    :page-size="pageSize" @showSizeChange="onShowSizeChange" @change="getPagenum">
                    <template slot="buildOptionText" slot-scope="props">
                        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                        <span v-if="props.value === '50'">全部</span>
                    </template>
                </a-pagination>
            </template>
        </div>

2、js代码块

2.1 data里面的代码

pageSizeOptions: ['10', '20', '30', '40', '50'],
current: 1,
pageSize: 10,
total: 0, //默认0条数据

2.2 methods里面的代码

			//点击分页请求接口
			getPagenum(page, pageSize) {
                this.getcgList(page, pageSize) //获取列表
            },
            onShowSizeChange(current, pageSize) {
                this.pageSize = pageSize;
                this.getcgList(current, pageSize) //获取列表
            },
			//请求列表接口   
            getcgList(page, limit, no, begin_at, end_at, goods_no, status, check_status, sale_type) {
                let params = {
                    page: page,
                    limit: limit,
                    type: '180021',
                    no: no, //订单编号
                    begin_at: begin_at, //开始时间
                    end_at: end_at, //结束时间
                    goods_no: goods_no, //商品编号
                    status: status, //单据状态
                    check_status: check_status, //审核状态
                    sale_type: sale_type, //销售类型
                }
                this.$get(this.$api.adminGetxsListone, params).then(res => {
                    console.log(res, '销售订单列表')
                    if (res.status === 200) {
                        this.total = res.data.total //总共条数
                        this.selectedRowKeys = [] //清空之前选中的
                        let arr = res.data.data
                        console.log(arr, '获取采购单列表')
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },