(vue)antd添加分页获取数据
效果:
<!-- 表格区 -->
<a-table
:columns="columns"
:data-source="data"
:scroll="{ x: 1300 }"
:row-selection="rowSelection"
rowKey="id"
:pagination="false"
>
<a slot="action" slot-scope="text" href="javascript:;">
<span @click="changeTube(text)">修改</span>
<span @click="delTube(text)">删除</span>
</a>
</a-table>
<a-pagination
:total="total"
:show-total="(total) => `总条数${total}条`"
:page-size="10"
:default-current="pageNum"
style="margin: 10px"
@change="pageChange"
/>
methods: {
//查询
onSubmit() {
GetgetReceivePage({ ...this.lngTakeForm, pageNum: this.pageNum, pageSize: 10 }).then((res) => {
if (res.code == 0) {
this.data = res.page.rows
this.total = res.page.total
} else {
this.$message.error('系统错误,稍后查询')
}
})
},
//分页
pageChange(page) {
this.pageNum = page
this.onSubmit()
},
}