and+design的table前端本地分页处理

sosojie2025-12-08 16:10

在有一些场景下面table需要前端做分页的时候，这个时候可以用的table的pagination这个配置功能，能实现前端本地分页，代码如下：

html

ini 复制代码

 <a-table
  :scroll="{ x: 'max-content' }"
  :rowKey="(record) => record.id"
  :columns="realColumns"
  :data-source="tableData"
  bordered
  :loading="loading"
  :pagination="paginationConfig"
>
  <template slot="action" slot-scope="text, record, index">
    <a @click="del(index)" style="color: red">移除</a>
  </template>
</a-table>

javascript

javascript 复制代码

data() { 
    return { 
        loading: false, 
        tableData: [], 
        paginationConfig: { 
            current: 1, 
            pageSize: 10, 
            total: 0, 
            showSizeChanger: true, 
            showQuickJumper: true, 
            pageSizeOptions: ['10', '20', '50', '100'], 
            showTotal: (total, range) => `总共 ${total} 条数据`, 
            onChange: (page, pageSize) => { this.handlePageChange(page, pageSize); }, 
            onShowSizeChange: (current, size) => { this.handlePageSizeChange(current, size); } 
        }, 
        queryParam: { 
            params: { 
            isCharging: true, 
            sellerId: JSON.parse(localStorage.pro__SELLER_ID).value, }, 
            current: 1, 
            size: 10, 
            total: 0, 
        },  
    } 
},