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修改css样式style
Apr 15 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
动态加载jquery库的方法
Feb 12 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
vue实现选中效果
Oct 07 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图像处理类实例
2015/07/28 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
简单的js计算器实现
2016/10/26 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python OS模块常用函数说明
2015/05/23 Python
不要用强制方法杀掉python线程
2017/02/26 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
医学类导师推荐信范文
2013/11/19 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
基层党建工作简报
2015/07/21 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS