分页的实现(Vue+Element)+输入框关键字筛选
1.这里用的是Element 自带的分页组件
<template> <div> <div>订单列表</div> <div> <div><input type="text" placeholder="关键词" v-model='search'></div> </div> <div> <div v-for="(cash, index) in orderList.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="cash.id"> <table> <thead> <tr> <th>序号</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>操作</th> </tr> </thead> <tbody> <tr> <td>{{ index+1>9?index+1:"0"+(index+1) }}</td> <td>{{cash.createTime}}</td> <td>{{cash.orderId}}</td> <td>{{cash.cilentName}}</td> <td>{{cash.cilentId}}</td> <td>{{cash.cilentPhone}}</td> <td>{{cash.cilentGrade}}</td> <td>￥{{cash.orderPrice}}</td> <td>{{cash.orderState}}</td> <td>{{cash.auditState}}</td> <td>{{cash.receiver}}</td> <td>{{cash.phone}}</td> <td>{{cash.address}}</td> <td>{{cash.orderRemark}}</td> <td><a>查看</a><a>编辑</a><a>删除</a></td> </tr> </tbody> </table> </div> </div> <-- 分页 --> <div> <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/.最外层类名{......}。