分頁的實現(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.如有問題，歡迎指教。
附上效果圖一份：
