分页组件使用,每次切换的时候询问,取消当前页不变,确定后跳到指定页
注意 :current-page.sync="currentPage4" 必须用.sync
<template>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
currentPage4: 1,
oldcurrentPage4:0,
};
},
watch: {
currentPage4:{
handler(newName, oldName) {
   console.log(newName)
console.log(oldName)
this.oldcurrentPage4=oldName
  },
}
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.open()
// console.log(`当前页: ${val}`);
console.log(this.oldcurrentPage4)
},
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
this.currentPage4=this.oldcurrentPage4
});
}
},
};
</script>