Ant Design Vue 在list中自定义分页
Ant Design Vue中table拥有定义的@change事件,所以分页时定义pagination绑定自定义分页参数,调用handleTableChage方法就可以进行分页。<a-table:columns="columns":dataSource="dataSource":loading="loading"...
·
Ant Design Vue中table拥有定义的@change事件,所以分页时定义pagination绑定自定义分页参数,调用handleTableChage方法就可以进行分页。
<a-table
:columns="columns"
:dataSource="dataSource"
:loading="loading"
:pagination="ipagination"
:rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
@change="handleTableChange"
ref="table"
rowKey="id"
size="middle"
>
/* 分页参数 */
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
但是在list中Ant Design Vue官方API并未定义@chang事件,所以博主想了个方法自定义分页事件,pagination中的属性绑定Table中的属性,实现table,list完美切换。不多bb看代码。
<a-pagination v-model="ipagination.current"
v-bind:pageSize="ipagination.pageSize"
v-bind:showTotal="(total, range) => `${range[0]}-${range[1]} 共
${total} 条`"
v-bind:total="ipagination.total"
v-bind:pageSizeOptions="ipagination.pageSizeOptions"
v-bind:showQuickJumper="true"
v-bind:showSizeChanger="true"
@change="handleListChange"
@showSizeChange="handleListChange"
size="small"
></a-pagination>
handleListChange(current, pageSize) {
this.ipagination.current = current;
console.log(pageSize)
if (pageSize != null && pageSize != "") {
this.ipagination.pageSize = pageSize;
}
this.loadData(null, this.breadFile[this.breadFile.length - 1].id, this.breadFile[this.breadFile.length - 1].name, this.sortList);
}
且记pagination中方法不能传参,传递参数js中的参数不会自动更行,会绑定上次访问分页时current页的数据。如果想要传参的话参考https://blog.csdn.net/Corey_mengxiaodong/article/details/79977287
更多推荐
已为社区贡献4条内容
所有评论(0)