zoukankan      html  css  js  c++  java
  • vue项目使用elementUI pagination 实现前端分页

    通常情况下分页都是由后端来实现,前端只需要传递分页参数,但是不排除需要前端来进行分页的情况,今天就来和大家说下前端如何实现分页:

    1.首先在data里定义四个变量(pageSize , pageCurrent , tableData , pageTotal):

    pageSize  表示一页显示多少条数据(需要给个默认值,例如15)
    pageCurrent  表示当前页码(需要给个默认值,例如1)
    tableData  存放列表数据(数组)

    pageTotal  表示数据的总个数(需要给个默认值,例如10)
      

     2.分页组件里这样绑定数据:

                  <el-pagination
                        :current-page="pageCurrent"
                        :page-size="pageSize"
                        :page-sizes="[15, 50, 100]"
                        :total="pageTotal"
                        @current-change="pageChange"
                        @size-change="pageSizeChange"
                        layout="total, prev, pager, next,sizes"
                    ></el-pagination>    

    3.函数的事件:

      

        // 分页
            pageChange(page) {
                this.pageCurrent = page;
            },
            pageSizeChange(page) {
                this.pageSize = page;
            },    

      

    4.table组件里这样写:

    <el-table v-loading="loading" :data="tableData.slice((pageCurrent - 1) * pageSize, pageCurrent * pageSize)" style=" 100%" height="500" :row-style="{ height: '60px' }"></el-table>

    5.调用后端的接口,把接口返回过来的数据赋值给tableData这个list数组(很简单,这里代码就不展示了)

    6.这样就实现啦,是不是很简单!

  • 相关阅读:
    java中的泛型
    那些java中的包装类
    那些java中的内部类
    那些java中的常用类(二)
    那些java中的常用类(一)
    java中的反射机制浅析
    java中的垃圾回收机制浅析
    java中equals与==的用法浅析
    在iOS项目中,这样才能完美的修改项目名称
    最新的 iOS 申请证书与发布流程
  • 原文地址:https://www.cnblogs.com/ZhaoWeiNotes/p/13920183.html
Copyright © 2011-2022 走看看