前言

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>

总结

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