分页组件使用,每次切换的时候询问,取消当前页不变,确定后跳到指定页

184 阅读2分钟

分页组件使用,每次切换的时候询问,取消当前页不变,确定后跳到指定页

注意 :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) {
      &emsp;&emsp; console.log(newName)
           console.log(oldName)
           this.oldcurrentPage4=oldName
    &emsp;&emsp;},
      }
    },
    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>