Vue 实现分页与输入框关键字筛选功能


Posted in Javascript onJanuary 02, 2020

分页的实现(Vue+Element)+输入框关键字筛选

1.这里用的是Element 自带的分页组件

<template>
<div class="sales-table">
<div class="order-list-header">订单列表</div>
<div class="back-box">
<div class="search-box"><input type="text" name="" id="" class="order-search-input" placeholder="关键词" v-model='search'></div>
</div>
<div class="table-box">
<div class="table-list" v-for="(cash, index) in orderList.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="cash.id">
<table id="tableSort" style="table-layout:fixed;">
<thead class="table-header">
<tr>
<th class="left-radius">序号</th>
<th>创建时间</th>
<th>订单ID</th>
<th>所属用户姓名</th>
<th>所属用户ID</th>
<th>所属用户手机</th>
<th>所属用户层级</th>
<th>订单金额</th>
<th>订单状态</th>
<th>审核状态</th>
<th>收件人</th>
<th>联系电话</th>
<th>收货地址</th>
<th>订单备注</th>
<th class="right-radius">操作</th>
</tr>
</thead>
<tbody class="table-lists">
<tr class="first-tr">
<td class="sequence">{{ index+1>9?index+1:"0"+(index+1) }}</td>
<td class="sequence">{{cash.createTime}}</td>
<td class="sequence">{{cash.orderId}}</td>
<td class="sequence">{{cash.cilentName}}</td>
<td class="sequence">{{cash.cilentId}}</td>
<td class="sequence">{{cash.cilentPhone}}</td>
<td class="sequence">{{cash.cilentGrade}}</td>
<td class="sequence money">¥{{cash.orderPrice}}</td>
<td class="sequence">{{cash.orderState}}</td>
<td class="sequence">{{cash.auditState}}</td>
<td class="sequence">{{cash.receiver}}</td>
<td class="sequence">{{cash.phone}}</td>
<td class="sequence">{{cash.address}}</td>
<td class="sequence">{{cash.orderRemark}}</td>
<td class="sequence"><a class="view-order">查看</a><a class="edit-order">编辑</a><a class="delete-order">删除</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<-- 分页 -->
<div class="page">
<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="Cashdata.length">
</el-pagination>
</div>
</div>
</template>

2.文中标红的字不再是循环数组,名字随意取,在后面搜索关键字部分也标红了。数据多分页效果会更加明显。

<script>
export default {
data() {
return {


currentPage:1, //初始页


pagesize:10,//每页的数据// 搜索关键词


search:"",


Cashdata: [{



createTime:"2019/1/21/ 14:30:30",



orderId: "1555555454",



cilentName:"网三",



cilentId:"21313216544",



cilentPhone:"13976605432",



cilentGrade:"1",



orderPrice:"454664",



orderState:"已提交",



auditState: "系统已确认",



receiver: "和大宝",



phone:"16565644444",



address:"广东省深圳市*************************",



orderRemark:"少放醋,多方唐撒旦啊阿萨大萨达"


},


{



createTime:"2019/1/21/ 14:30:30",



orderId: "1555555454",



cilentName:"网三",



cilentId:"21313216544",



cilentPhone:"15576605432",



cilentGrade:"1",



orderPrice:"454664",



orderState:"已提交",



auditState: "系统已确认",



receiver: "和大宝",



phone:"16565644444",



address:"广东省深圳市*************************",



orderRemark:"少放醋,多方唐撒旦啊阿萨大萨达"



},


 ]};


},


methods: {



// 初始页currentPage、初始每页数据数pagesize和数据data



handleSizeChange: function (size) {



this.pagesize = size;



console.log(this.pagesize) //每页下拉显示数据


 },



handleCurrentChange: function(currentPage){




this.currentPage = currentPage;




document.documentElement.scrollTop = 0;//点击翻页的时候回到顶部




console.log(this.currentPage) //点击第几页



},


 },

// 订单列表搜索关键字

 computed: {


orderList: function() {


var _search = this.search;


if (_search) {



return this.Cashdata.filter(function(product) {



return Object.keys(product).some(function(key) {



return String(product[key]).toLowerCase().indexOf(_search) > -1


})

})

}


return this.Cashdata;


}

}
};
</script>

3.分页的CSS只是自己修改的部分,如有需要,请自行脑补。对了,补充一句,修改Eleement样式时,先在样式前加 /deep/.最外层类名{......}。

<style lang="scss" scoped>
/deep/.el-pagination{
 margin-bottom: 30px;
 margin-top: 30px;
 float: right;
 font-size: 20px;
 color: #333333;
 margin-right: 55px;
 font-weight: normal;

 .el-select .el-input{
 width: 126px;
 height: 36px;
 }
 .el-select .el-input .el-input__inner{
 height: 100%;
 font-size: 20px;
 color: #333333;
 }
 .el-pagination__editor.el-input .el-input__inner{
 height: 36px;
 }
 .btn-prev,.btn-next{
 height: 36px;
 }
 .btn-prev{
 border-radius: 5px 0 0 5px;
 }
 .btn-next{
 border-radius: 0 5px 5px 0;
 }
 .el-pager li{
 line-height: 36px;
 height: 36px;
 font-size: 20px;
 }
 .el-pagination__total{
 color: #333333;
 }
 button,span:not([class*=suffix]){
 height: 36px;
 line-height: 36px;
 font-size: 20px;
 color: #333333;
 }
 .el-pagination__editor.el-input{
 font-size: 20px;
 }
 }
</style>

4.如有问题,欢迎指教。

附上效果图一份:

Vue 实现分页与输入框关键字筛选功能

总结

以上所述是小编给大家介绍的Vue 实现分页与输入框关键字筛选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
javascript测试题练习代码
Oct 10 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 #Javascript
JS实现秒杀倒计时特效
Jan 02 #Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 #Javascript
JS实现导航栏楼层特效
Jan 01 #Javascript
JS实现旋转木马轮播图
Jan 01 #Javascript
JS实现普通轮播图特效
Jan 01 #Javascript
You might like
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python中for用来遍历range函数的方法
2018/06/08 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
金智子午JAVA面试题
2015/09/04 面试题
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
计算机专业推荐信范文
2013/11/20 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
工程承包协议书范本
2014/09/29 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
英语辞职信范文
2015/02/28 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
MySQL常用慢查询分析工具详解
2022/08/14 MySQL