专栏首页vue+elementvue+element实现分页的封装
原创

vue+element实现分页的封装

分页想必大家都写过,后台管理项目分页是必不可少的,话不多说,上代码

Paging组件

<template>
    <!-- 分页组件的封装 -->
    <div class="pagination">
        <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :page-sizes="[1,5,10,15,,20]"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="pageNum"
        :page-size="pageSize"
        :total="total"
        :small="small">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "Paging",
    data () {
        return {
            pageNum: 1 //当前页数
        }
    },
    //子组件接收父组件的值
    props:{
        'total': {   //总条目数
            required: false,//是否必须
            default: 0 //默认值
        },
        'pageSize': {
            required: false, //是否必须
            default: 10 //默认值(默认显示10条)
        },
        'small': {  //是否使用小型分页样式
            required: false, //是否必须
            type: Boolean,  //类型
            default: false  //默认值
        }
    },
    //计算属性  计算属性是基于他们的依赖做缓存 
    // (如果计算的逻辑大的话,可以用这个,比方说你先循环100次,再循环1000次,他会把上一次的循环也加上去,也就是缓存)
    computed: {
        
    },
    //侦听器 响应数据的变化
    watch: {
        //监听页数变化
        pageNum(val,index) {
            console.log(val); //值
            console.log(index);//下标
            // 改变这个值并不会触发 handleCurrentChange
            if (typeof val === "number") {
                this.pageNum = val;
            }
        },
    },
    methods: {
      // 当前页变化
      sizeChange(val) {
        // console.log(val);
        //子组件向父组件传值
        this.$emit("sizeChange", val);
      },
      // size变化
      currentChange(val) {
        // console.log(val);
        //子组件向父组件传值
        this.$emit('currentChange', val);
      },
    }
}
</script>

<style lang="scss" scoped>
.pagination {
    margin: 20px 0;
    text-align: right;
  }
</style>

页面使用

 <!-- 分页 -->
 <Paging :pageNum="this.form.page" :total="total" :pageSize="this.form.size" :small="true"
              @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
              
 
<script>
import Paging from '../../components/Paging'
export default {
    components: {
        Paging
    },
    data () {
        return {
            total:0,
            form:{
                page:1,
                size:10
            }
        }
    },
    created () {
        this.findAllPost() //查询接口
    },
    methods: {
        async findAllPost(){
            let {data:res}=await this.$http.post('feedback/findAll',this.form)
            console.log(res);
            if (res.code==200) {
                this.adminList=res.data.records
                this.total=res.data.total
            }
        },
        //上一页下一页按钮
        currentChange(val) {
            this.form.page = val;
            this.findAllPost();
        },
        //每页显示几条数据按钮
        sizeChange(val) {
            this.form.size = val;
            this.findAllPost();
        },
    }
}
</script>

<style lang="scss" scoped>

</style>

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue项目使用 富文本 封装

    我又来了,今天给大家分享一个富文本框的封装,写后台管理也离不开富文本框,我就做了封装,供大家参考,

    前端小白@阿强
  • element ui 图片上传封装多张或单张

    最近写了一个后台管理项目,发现每个后台项目都离不开上传图片,决定把上传图片做个封装,话不多说直接上代码!

    前端小白@阿强
  • Flutter之Scaffold Widget

    前文我们简单刷了刷Flutter这个大BOSS,不知大家感触几何。接下来我们来看一点Flutter基础布局的东西。大家都知道,在Android原生中我们使用se...

    小海编码日记
  • 大型Vuex应用程序的目录结构

    为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

    Fundebug
  • R语言 排序问题

    用户1359560
  • nginx简明教程

    nginx简介 Nginx (“engine x”) 是一个高性能的HTTP和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 服务器。 Nginx ...

    xiangzhihong
  • 【Go 语言社区】js开发积累

    js开发积累 [size=13.3333px] 一、在js中遍历数组与其他语言的不同之处 for(var x in myvars){   alert(myvar...

    李海彬
  • 2 机器学习入门——逻辑回归第三课

    所有的数据下载地址:https://gitee.com/tianyalei/machine_learning,按对应章节查找。

    天涯泪小武
  • 推荐系统遇上深度学习(五十)-使用强化学习优化用户的长期体验

    在现有的推荐模型中,往往优化的目标是点击率,而忽略了用户的长期体验。特别是在信息流推荐中,给用户推荐一个标题很吸引人但内容比较无聊的消息,往往点击率很高,但用户...

    石晓文
  • Deep-Fake原理揭示:使用WGAN-GP算法构造精致人脸

    在上一节中可以看到基于”推土距离“的WGAN网络能够有效生成马图片,但是网络构造能力有所不足,因此导致有些图片模糊,甚至有些图片连马的轮廓都没有构建出来,本节我...

    望月从良

扫码关注云+社区

领取腾讯云代金券