AntDesignVue——table组件分页功能的封装（基于Vue2后端分
页）
摘要
我们在使⽤Ant Design Vue的Table表格时，经常需要使⽤其中的分页功能，通过设置pagination="true"即可开启表格分页，但是我们还需要配置许多分页参数，因此对分页功能进⾏封装能很⼤程度提升开发效率。
封装
⾸先我们新建⼀个mixins⽂件夹，并在⾥⾯新建⼀个pagination.js⽂件作为封装分页功能的混⼊⽂件：
// 因为是后端分页，所以需要设定好后端分页参数，这⾥根据业务需求，默认为page、limit，分别代表查询页和每页数据数量参数，current、pageSize分别代表对于的值。export default ({ serverCurrent = 'page', serverPageSize = 'limit', current = 1, pageSize = 10 } = {}) => ({
data () {
const change = (current, pageSize) => {
this.pagination.current = current
this.pagination.pageSize = pageSize
}
return {
pagination: {
total: 0,
current: current,
pageSize: pageSize,
showSizeChanger: true,
pageSizeOptions: ['10', '20', '50', '100'],
onShowSizeChange: (current, pageSize) => change(current, pageSize),
onChange: (current, pageSize) => change(current, pageSize),
// 分页参数重置⽅法，仅仅重置分页参数，不会重新加载表格
reset: () => {
this.pagination.current = current
this.pagination.pageSize = pageSize
}
}
}
},
computed: {
// 服务端查询参数
serverPagination () {
return {
[serverCurrent]: this.pagination.current, // 第⼏页
[serverPageSize]: this.pagination.pageSize // 每页中显⽰数据的条数
}
}
}
})
使⽤
<template>
//1. 在视图中直接引⼊pagination变量
<a-table
:pagination="pagination"
@change="handleTableChange"
>
</a-table>
</template>
// 2. 引⼊混⼊器
import paginationMix from '@mix/pagination.js';
export default {
// 3. 混⼊分页器，传⼊分页接⼝需要的参数，默认为page、limit
mixins: [ paginationMix({ serverCurrent: 'page', serverPageSize: 'limit' }) ],
created () {
},
methods: {
async getTableData () {
const { data: res } = await this.$(
this.url, { params: this.serverPagination }
)
antdesignvuetable动态表头this.data = res.data.list
// 4. ⽹络获取数据时，将`total`值设置在`pagination`对象上即可
al = al
},
handleTableChange () {
}
} }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。