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 相关文章推荐
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
初步了解javascript面向对象
Nov 09 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
vue地区选择组件教程详解
May 04 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
vue回到顶部监听滚动事件详解
Aug 02 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
js编写简易的计算器
2020/07/29 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
vue中watch的用法汇总
2020/12/28 Vue.js
Python使用chardet判断字符编码
2015/05/09 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Python 变量的创建过程详解
2019/09/02 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python grpc超时机制代码示例
2020/09/14 Python
python如何实现递归转非递归
2021/02/25 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
Sql面试题
2013/03/20 面试题
应届毕业生求职信范文分享
2013/12/26 职场文书
大学生演讲稿
2014/04/25 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
个人作风建设自查报告
2014/10/22 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
捐资助学感谢信
2015/01/21 职场文书
奖学金感谢信
2015/01/21 职场文书
离职证明格式样本
2015/06/12 职场文书
创业计划书之餐饮
2019/09/02 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android