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.这样就实现啦,是不是很简单!

  • 相关阅读:
    SQL命令
    MySQL、Oracle、SQL Server
    函数调用
    php 读取图片显示在页面上 demo
    浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
    jquery $.ajax()方法
    HTML 字符实体
    php 内置支持的标签和属性
    java-03 变量与运算符
    java-02 JDK安装与环境变量配置&安装编程IDE
  • 原文地址:https://www.cnblogs.com/ZhaoWeiNotes/p/13920183.html
Copyright © 2011-2022 走看看