app直播源代码，vue+Ant design a-table分页器使用
vue+Ant design a-table分页器使用 当前页current设置生效
<a-table :columns="columns" :data-source="detail" :pagination="pagination" rowKey="id" @change="tablePaginationChange">
<span slot="serial" slot-scope="text, record, index">
{{ index + 1 }}
</span>
</a-table>
重点看 :pagination="pagination" 和 @change="tablePaginationChange"
data () {
return {
columns: columns,
detail: [],
pagination: {
current: 1,
// defaultCurrent: 1,
total: 0, // 总数
showSizeChanger: true,
pageSizeOptions: ['1', '10', '20', '40', '80', '100'],
showTotal: total => `共 ${total} 条`, // 分页中显示总的数据
// hideOnSinglePage: true, // 只有一页时是否隐藏分页器
pageSize: 1 // 每页条数，所有页设置统一的条数
}
}
},
// 分页发生变化触发的事件
methods: {
tablePaginationChange (pagination) {
// console.log(pagination)
this.pagination.current = pagination.current // 重新设置当前页
this.pagination.pageSize = pagination.pageSize
}
}
created () {
this.$watch('visible', () => {
const modelId = this.model.id
getDataList({ id: id }).then((res) => {
const pagination = { ...this.pagination }
pagination.current = 1
// 重新设置当前页 才会生效
this.tablePaginationChange(pagination)
this.detail = res.data
})
})
以上就是 app直播源代码，vue+Ant design a-table分页器使用，更多内容欢迎关注之后的文章