vue 动态页码值的变化

结构 代码

<el-row type="flex" justify="center" align="middle" style="height: 60px">
 <!-- 分页组件 -->
 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
 :current-page="pageParams.page" :page-sizes="[10, 20, 30, 50]"
 :page-size="pageParams.pagesize" layout="total, sizes, prev, pager, next, jumper"
 :total="total">
 </el-pagination>
</el-row>

js 代码

data() {
  return {       
    //默认显示第几页
    currentPage4: 3,
    //保存加载列表数据
    list: [],
    // 因为有分页器
    pageParams: {
        //页面值
        page: 1,
        //每页显示的条数
        pagesize: 10
    },
    // 总条数
    total: 0
}
},

methods: {

// 分页功能1
handleSizeChange(val) {  //每页显示的条数
    console.log(`每页 ${val} 条`);
    // 根据点击事件 选择页面显示的条数
    this.pageParams.pagesize = val
    this.pageParams.page = 1
    // 重新渲染
    this.loadding()
},
//分页功能2
handleCurrentChange(val) {  //页码值
    console.log(`当前页: ${val}`);
    this.pageParams.page = val //根据点击事件切换的时候  展示的页码值
    // 页码值变了  要重新渲染  刷新一下
    this.loadding()
},

新增角色 页码有变化 优化

async doAdd() {
    try {
        const res = await addsettings(this.roleForm)  //这里不需要保存
        if (res.code !== 10000) return this.$message.error(res.message)
        console.log('新增', res);
        this.$message.success(res.message)
        //1 实现新增后  跳转到自己新增的页码的位置  就是你添加完成后  能直接看到你添加的信息, 不用手动去翻页
        //2 将页码值翻到最后一页   需要获取最大的页码值  
        //3 Math.ceil()  向上取整     
        //4 得到最大的页码值   用总条数 /当前每页显示的条数
        //5 因为每次添加了 ,上传到了服务器  但是浏览器还没有调用 没有重新渲染,所以你的总条数坑定是少一条的  所以先加一条
        this.total++   //先给总数+1条
        this.pageParams.page = Math.ceil(this.total / this.pageParams.pagesize)   //这样在就相当于给页码值重新赋了新值,重新渲染的时候就会传参过去
        //   重新渲染数据
        this.loadding()
        this.showDialog = false
    } catch (error) {
        console.log(error);
    }
},

点击删除角色 页码有变化 优化

    hdoDel(id) {
        //    提示用户
        this.$confirm('你确定删除该角色吗?').then(async () => {
            console.log('删除id', id);
            const res = await delroles(id)
            if (res.code !== 10000) return this.$message.error(res.message)
            // 删除成功提示用户
            this.$message.success(res.message)
            // 优化
            if (this.list.length === 1) { // 如果获取的当前列表的数据只有1 的时候  删除之后  让他的page(页码值)减 1
                this.pageParams.page--
                // 但是不可能一直减下去  所以判断一下  如果页码值小于等于0的时候,就不要减了  就保持页码值为1   页码值不能设置0吧
                if (this.pageParams.page <= 0) {
                    this.pageParams.page = 1
                }
            }
            // 重新加载数据
            this.loadding()
            // console.log('删除res', res);
        }).catch(error => error)
    },
    
    

下面的不用看 只是为了页面重新加载调用 根据自己需要发送请求 封装函数

      // 加载列表数据
    async loadding() {
        try {
            const res = await getsettings(this.pageParams)
            console.log('获取所有角色列表', res);  // res.data.rows  (id  name  description)
            if (!res.code === 10000) return this.$message.error(res.message)  //失败
            this.$message.success(res.message)  //成功
            this.list = res.data.rows
            this.total = res.data.total
        } catch (error) {
            console.log(error);
        }

    }
}

}