zoukankan      html  css  js  c++  java
  • 【vue】--------------vue+element-ui实现分页效果-------------【劉】

    vue+Element-ui实现分页效果

    当从后台请求到大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。

    1.这次使用的是vue2.0+element-ui实现一个分页功能,element-ui中给我提供了一个Pagination 分页,使用Pagination可以快速完成分页功能

    效果展示

    代码附录:template

    <div class="deit">
        <div class="crumbs">
          <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="cantainer">
                        <el-table style=" 100%;"
                        :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)"  //对数据请求的处理,最为重要的一句话
                        >
                            <el-table-column type="index" width="50">    
                            </el-table-column>
                            <el-table-column label="日期" prop="date" width="180">    
                            </el-table-column>
                            <el-table-column label="用户姓名" prop="name" width="180">    
                            </el-table-column>
                            <el-table-column label="邮箱" prop="email" width="180">    
                            </el-table-column>
                            <el-table-column label="地址" prop="address" width="200">    
                            </el-table-column>    
                        </el-table>
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 20, 40]" //这是下拉框可以选择的,每选择一行,要展示多少内容
                                :page-size="pagesize"         //显示当前行的条数
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="userList.length">    //这是显示总共有多少数据,
                        </el-pagination>
            </div>
        </div>
      </div>

    代码附录:script

    需要data定义一些,userList定义一个空数组,请求的数据都是存放这里面

    data () {
      
      const item = {
        date: "1998-01-01",
        name: "王小虎",
        email: "text@qq.com",
        address:"黑龙江。。。。"
      };
    return {
                    currentPage:1, //初始页
                    pagesize:5,    //    每页的数据
                    userList: Array(20).fill(item),  //复制20条一样的item数据
    
          }
      },
  • 相关阅读:
    js本地时钟
    《Real Time Rendering》第二章 图形渲染管线
    《Real Time Rendering》第三版 翻译
    《Windows via C/C++》学习笔记(一):Error handling
    《Real Time Rendering》第三章 图形处理单元
    《工程结构优化设计基础》总结
    《TCP/IP协议详解》学习笔记(一):概述
    【转载】四大开源3d游戏引擎探究
    几何非线性中的几个重要概念
    《Windows via C/C++》学习笔记(二):Working with Characters and String
  • 原文地址:https://www.cnblogs.com/lstcon/p/10342307.html
Copyright © 2011-2022 走看看