利用vue + element实现表格分页和前端搜索的方法


Posted in Javascript onDecember 25, 2017

前言

ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统、表格、表单、树形菜单、通知等。对于搞后台管理界面的项目,特别是不需要考虑兼容ie8、ie9以下的项目、ElementUI是一个不错的选择。

而且ElementUI的文档写得十分详尽,参照demo可以很快上手。

本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

实现思路

1.前端后台管理会存在很多表格,表格数据过多就需要分页;

2.前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索

3.下面贴上一个demo

示例代码

<template>
<div>
 <el-input v-model="tableDataName" placeholder="请输入姓名" style="width:240px"></el-input>
 <el-button type="primary" @click="doFilter">搜索</el-button>
 <el-button type="primary" @click="openData">展示数据</el-button>
 <el-table
 :data="tableDataEnd"
 border
 style="width: 100%">
 <el-table-column
  prop="date"
  label="日期"
  width="180">
 </el-table-column>
 <el-table-column
  prop="name"
  label="姓名"
  width="180">
 </el-table-column>
 <el-table-column
  prop="address"
  label="地址">
 </el-table-column>
 </el-table>
 <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[1, 2, 3, 4]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="totalItems">
 </el-pagination>
</div>
</template>
<script>
export default {
 data() {
 return {
  tableDataBegin: [
  {
   date: "2016-05-01",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-02",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1517 弄"
  },
  {
   date: "2016-05-03",
   name: "王二虎",
   address: "上海市普陀区金沙江路 1519 弄"
  },
  {
   date: "2016-05-04",
   name: "王二虎",
   address: "上海市普陀区金沙江路 1516 弄"
  },
  {
   date: "2016-05-05",
   name: "王三虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-06",
   name: "王三虎",
   address: "上海市普陀区金沙江路 1517 弄"
  },
  {
   date: "2016-05-07",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1519 弄"
  },
  {
   date: "2016-05-08",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1516 弄"
  }
  ],
  tableDataName: "",
  tableDataEnd: [],
  currentPage: 4,
  pageSize: 2,
  totalItems: 0,
  filterTableDataEnd:[],
  flag:false
 };
 },
 created() {
 this.totalItems = this.tableDataBegin.length;
 if (this.totalItems > this.pageSize) {
  for (let index = 0; index < this.pageSize; index++) {
  this.tableDataEnd.push(this.tableDataBegin[index]);
  }
 } else {
  this.tableDataEnd = this.tableDataBegin;
 }
 },
 methods: {
 //前端搜索功能需要区分是否检索,因为对应的字段的索引不同
 //用两个变量接收currentChangePage函数的参数
 doFilter() {
  if (this.tableDataName == "") {
  this.$message.warning("查询条件不能为空!");
  return;
  }
  this.tableDataEnd = []
  //每次手动将数据置空,因为会出现多次点击搜索情况
  this.filterTableDataEnd=[]
  this.tableDataBegin.forEach((value, index) => {
  if(value.name){
   if(value.name.indexOf(this.tableDataName)>=0){
   this.filterTableDataEnd.push(value)
   }
  }
  });
  //页面数据改变重新统计数据数量和当前页
  this.currentPage=1
  this.totalItems=this.filterTableDataEnd.length
  //渲染表格,根据值
  this.currentChangePage(this.filterTableDataEnd)
  //页面初始化数据需要判断是否检索过
  this.flag=true
 },
 openData() {},
 handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  this.pageSize = val;
  this.handleCurrentChange(this.currentPage);
 },
 handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  this.currentPage = val;
  //需要判断是否检索
  if(!this.flag){
  this.currentChangePage(this.tableDataEnd)
  }else{
  this.currentChangePage(this.filterTableDataEnd)  
  }
 }, //组件自带监控当前页码
 currentChangePage(list) {
  let from = (this.currentPage - 1) * this.pageSize;
  let to = this.currentPage * this.pageSize;
  this.tableDataEnd = [];
  for (; from < to; from++) {
  if (list[from]) {
   this.tableDataEnd.push(list[from]);
  }
  }
 }
 }
};
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
VueRouter导航守卫用法详解
Dec 25 #Javascript
基于zTree树形菜单的使用实例
Dec 25 #Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 #Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 #Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
zTree树形菜单交互选项卡效果的实现方法
Dec 25 #Javascript
You might like
php xfocus防注入资料
2008/04/27 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
动态创建类实例代码
2009/10/07 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Python简易版图书管理系统
2019/08/12 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
Python csv文件记录流程代码解析
2020/07/16 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
PyQt 如何创建自定义QWidget
2021/03/24 Python
求职推荐信
2013/10/28 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
未婚证明书模板
2014/10/08 职场文书
投资入股合作协议书
2014/10/28 职场文书
实习科室评语
2015/01/04 职场文书
中学推普周活动总结
2015/05/07 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python