vue+Element-ui前端实现分页效果


Posted in Javascript onNovember 15, 2020

本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码,供大家参考,具体内容如下

分页技术

分页技术的概念

分页就是将所有的数据分段展示给用户,用户看到的可能不是全部的数据,而是其中一部分,用户可以通过点击页码来查找自己需要的内容,也可以通过模糊查询获取符合内容的数据

分页的意义

分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如果不顾一切的Select * from某个表,再将返回的数据一古脑的扔给客户,即使客户能够忍受成千上万足够让人眼花缭乱的表格式数据,繁忙的网络,紧张的服务器也会提出它们无声的抗议,甚至有时会以彻底的罢工

前端实现分页效果

在el-tree控件中将内容按照一个页面显示十条数据,来实现分页的效果

实现效果:el-tree

vue+Element-ui前端实现分页效果

<template>
 <div class="big">
 <div class="top">
 <el-input placeholder="搜索" v-model="searchData" @input="search"></el-input>
 </div>
 <div class="middle">
 <el-tree :data="list">
 <span slot-scope="{ node, data }">
  <span class="el-icon-tickets"></span>
  <span>{{data.name}} {{data.age}}</span>
 </span>
 </el-tree>
 </div>
 <div class="bottom">
 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="page"
 :page-size="limit" layout="prev, pager, next" :total="total"></el-pagination>
 </div>
 </div>
</template>
<script>
 export default {
 data() {
 return {
 data: [{
  name: 'aa',
  age: 12
  },
  {
  name: 'bb',
  age: 13
  }
 ],//列举一部分的数据
 list: [], // 显示的数据
 limit: 10, // 条数,每一页显示的数量
 total: 20, // 所有的数量
 page: 1, //当前页
 searchData: '' // 搜索内容
 }
 },
 created() {
 this.pageList()
 },
 methods: {
 pageList() {
 this.getList()
 },
 // 处理数据
 getList() {
 // es6过滤得到满足搜索条件的展示数据list
 var list = this.data.filter((item, index) =>
  item.name.includes(this.searchData)
 ) // 搜索符号条件的内容
 console.log(list)
 this.list = list.filter((item, index) =>
  index < this.page * this.limit && index >= this.limit * (this.page - 1)
 ) //根据页数显示相应的内容
 this.total = list.length
 },
 // 当每页数量改变
 handleSizeChange(val) {
 console.log(`每页 ${val} 条`);
 this.limit = val
 this.getList()
 },
 // 当当前页改变
 handleCurrentChange(val) {
 console.log(`当前页: ${val}`);
 this.page = val
 this.getList()
 },
 // 搜索过滤数据
 search() {
 this.page = 1
 this.getList()
 }
 },
 }
</script>

el-table实现分页效果也是类似的

展示效果

vue+Element-ui前端实现分页效果

html的代码,js的代码和tree的分页差不多,el-table的分页添加了可以选择显示的数量,以及跳转页码

<div class="big">
  <el-row>
   <el-col :span="21">
    <el-input v-model="searchData" @input="search" placeholder="输入姓名搜索"></el-input>
   </el-col>
   <el-col :span="3">
    <el-button type="success" @click="search">搜索</el-button>
   </el-col>
  </el-row>
  <el-table :data="list" border>
   <el-table-column label="姓名" prop="name"></el-table-column>
   <el-table-column label="年龄" prop="age"></el-table-column>
  </el-table>
  <div style="text-align: center;">
 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
  :current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
  layout="total, sizes, prev, pager, next, jumper" :total="total">
 </el-pagination>
 </div>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
浅析JS运动
Dec 28 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
vue+Element-ui实现分页效果
Nov 15 #Javascript
vue实现抽屉弹窗效果
Nov 15 #Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 #Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 #Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 #Javascript
vue 授权获取微信openId操作
Nov 13 #Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 #Javascript
You might like
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python二分法实现实例
2013/11/21 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python实现求最长回文子串长度
2018/01/22 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
python 经典数字滤波实例
2019/12/16 Python
python自动识别文本编码格式代码
2019/12/26 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
学习两会精神心得范文
2014/03/17 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python