Ant Vue a-table 分页功能

博主： Wangxs
发布时间：2021 年 02 月 06 日
678 次浏览
暂无评论
867字数
分类：杂七杂八

要是用分页功能自定义配置，你需要创建一个pagination的配置对象
```js
data() {
            return{
                pagination:{
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + '-' +range[1] + '共' + total + '条';
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: 0,
                }
            }
        },
```
然后table是这样的
```js
<a-table
                :loading="loading"
                :columns="columns"
                :data-source="problemList"
                :pagination="pagination"
                @change="handleTableChange">
            <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
                <a  @click="() => toEdit(record)">Edit</a>
            </div>
            </template>
        </a-table>
```
有个方法是这样的
```js
handleTableChange(pagination) {
                this.pagination.current = pagination.current
                this.pagination.pageSize = pagination.pageSize

},
```

最后修改：2021 年 02 月 06 日