在script里用var先声名三个变量
var nowDatasSize = -1
var currentPage = 1
var pageSize = 10
data中声名分页
data() {
const pageOnChange = (current, size) => {
currentPage = current
if (size != undefined) {
pageSize = size
}
this.getUserList()//获取列表数据
}
const pageSizeChange = (current, size) => {
currentPage = 1
if (size != undefined) {
pageSize = size
}
this.getUserList()
}
return {
pagination: {
hideOnSinglePage: false, // 只有一页时不显示分页
pageSize: 10,
total: 200, // 总共有多少条
onChange: pageOnChange, // 页码变化回调函数
showQuickJumper: true, // 是否显示快速跳转
current: 1, // 当前active的页码
showSizeChanger: true, // 是否显示页面大小变化选择框
onShowSizeChange: pageSizeChange, //页面大小变化回调函数
pageSizeOptions: ['5', '10', '20', '50'], // 页面大小变化选择框中可选变化
showTotal: (total) => {
return (
<span>
共 <span className="pagination">{total}</span> 条
</span>
)
},
},
}
在查询列表数据方法中添加
if (nowDatasSize != -1 && currentPage > Math.ceil(nowDatasSize / pageSize)) {
currentPage = Math.ceil(nowDatasSize / pageSize)
}
this.pagination.current = currentPage
this.pagination.pageSize = pageSize
UserList({ ...value, size: this.pagination.pageSize, pages: this.pagination.current }).then((res) => {
this.UserLists = res.resultBody.records
nowDatasSize = Number(res.resultBody.total)
})
在删除中添加计算
delUserBtn(record) {
let that = this
this.$confirm({
title: `确认删除${record.name}吗?`,
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk() {
nowDatasSize = nowDatasSize - that.UserLists.length
delUser(record.id).then((res) => {
that.getUserList()
})
},
})
},
顺带把查询 重置功能改了
searchCrumbs() {
currentPage = 1
this.getUserList(this.search)
},
resetCrumbs() {
currentPage = 1
this.search = {}
this.getUserList()
},