Vue 实现分页与输入框关键字筛选功能
程序员文章站
2022-03-20 18:23:52
分页的实现(vue+element)+输入框关键字筛选
1.这里用的是element 自带的分页组件
分页的实现(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 实现分页与输入框关键字筛选功能，希望对大家有所帮助