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插件开发 对话框插件开发
Apr 26 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 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
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Pycharm远程调试openstack的方法
2017/11/21 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python数值基础知识浅析
2019/11/19 Python
重构Python代码的六个实例
2020/11/25 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
企业演讲稿范文
2013/12/28 职场文书
环保标语大全
2014/06/12 职场文书
工地宣传标语
2014/06/18 职场文书
中国梦团日活动总结
2014/07/07 职场文书
英语感谢信范文
2015/01/20 职场文书
目标责任书格式范文
2015/05/11 职场文书
MySQL实现配置主从复制项目实践
2022/03/31 MySQL