vue axios请求分页器

最新推荐文章于 2024-05-19 20:00:47 发布

橙子a123

最新推荐文章于 2024-05-19 20:00:47 发布

阅读量191

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_68169041/article/details/127756979

版权

<template>
    <div>
         <el-pagination background layout="total, prev, pager, next" :current- 
      page="query.pageIndex"
            :page-size="query.pageSize" :total="pageTotal" @current- 
           change="handlePageChange"></el-pagination>

    </div>
</template>

<script>
export default {
    data() {
        return {
            query: {
//比如一下案列
                username: '',
                address: '',
                page: 1,
                pagelimit: 6,
         //后端需要的参数
            },
            pageTotal: 50,      
        }
    },
    created() {
        this.obj(),  //显示列表·············
    },
    methods: {
        obj() {
            this.$apiPost('显示列表接口',this.query).then(res => {
                this.arr = res.data.data
                console.log(this.arr);
            })
        },
    

        handlePageChange(val) {
            console.log(val);
            this.$set(this.query, 'page', val)
            // this.fen()
            this.obj()
        }
    },
    mounted() {


    },
}
</script>


// 直接复制 然后根据自己的后端参数进行修改参数，显示列表接口也需要修改