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 继承详解(四)
Jul 13 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 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 变量的定义方法
2010/01/26 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python计算时间差的方法
2015/05/20 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
python实现可逆简单的加密算法
2019/03/22 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
python math模块的基本使用教程
2021/01/16 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
经济信息系毕业生自荐信范文
2014/03/15 职场文书
真诚的求职信
2014/07/04 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
婚前协议书范本两则
2014/10/16 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS