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 相关文章推荐
javascript 保存文件到本地实现方法
Nov 29 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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
收集的PHP中与数组相关的函数
2007/03/22 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
SQL Server面试题
2016/10/17 面试题
新闻专业应届生求职信
2013/10/31 职场文书
物流创业计划书
2014/02/01 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
作息时间调整通知
2015/04/22 职场文书
小学语文教师研修日志
2015/11/13 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
如何有效防止sql注入的方法
2021/05/25 SQL Server