快捷導(dǎo)航

Vue 實(shí)現(xiàn)分頁(yè)與輸入框關(guān)鍵字篩選功能

更新時(shí)間：2020年01月02日 09:35:44 作者：DogZ

這篇文章主要介紹了Vue 實(shí)現(xiàn)分頁(yè)+輸入框關(guān)鍵字篩選功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

分頁(yè)的實(shí)現(xiàn)(Vue+Element)+輸入框關(guān)鍵字篩選

1.這里用的是Element 自帶的分頁(yè)組件

<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="關(guān)鍵詞" 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">序號(hào)</th>
<th>創(chuàng)建時(shí)間</th>
<th>訂單ID</th>
<th>所屬用戶姓名</th>
<th>所屬用戶ID</th>
<th>所屬用戶手機(jī)</th>
<th>所屬用戶層級(jí)</th>
<th>訂單金額</th>
<th>訂單狀態(tài)</th>
<th>審核狀態(tài)</th>
<th>收件人</th>
<th>聯(lián)系電話</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>
<-- 分頁(yè) -->
<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.文中標(biāo)紅的字不再是循環(huán)數(shù)組，名字隨意取，在后面搜索關(guān)鍵字部分也標(biāo)紅了。數(shù)據(jù)多分頁(yè)效果會(huì)更加明顯。

<script>
export default {
data() {
　　return {
　　　　currentPage:1, //初始頁(yè)
　　　　pagesize:10,//每頁(yè)的數(shù)據(jù)// 搜索關(guān)鍵詞
　　　　search:"",
　　　　Cashdata: [{
　　　　　　createTime:"2019/1/21/ 14:30:30",
　　　　　　orderId: "1555555454",
　　　　　　cilentName:"網(wǎng)三",
　　　　　　cilentId:"21313216544",
　　　　　　cilentPhone:"13976605432",
　　　　　　cilentGrade:"1",
　　　　　　orderPrice:"454664",
　　　　　　orderState:"已提交",
　　　　　　auditState: "系統(tǒng)已確認(rèn)",
　　　　　　receiver: "和大寶",
　　　　　　phone:"16565644444",
　　　　　　address:"廣東省深圳市*************************",
　　　　　　orderRemark:"少放醋，多方唐撒旦啊阿薩大薩達(dá)"
　　　　},
　　　　{
　　　　　　createTime:"2019/1/21/ 14:30:30",
　　　　　　orderId: "1555555454",
　　　　　　cilentName:"網(wǎng)三",
　　　　　　cilentId:"21313216544",
　　　　　　cilentPhone:"15576605432",
　　　　　　cilentGrade:"1",
　　　　　　orderPrice:"454664",
　　　　　　orderState:"已提交",
　　　　　　auditState: "系統(tǒng)已確認(rèn)",
　　　　　　receiver: "和大寶",
　　　　　　phone:"16565644444",
　　　　　　address:"廣東省深圳市*************************",
　　　　　　orderRemark:"少放醋，多方唐撒旦啊阿薩大薩達(dá)"
　　　　　　},
　　　　　]};
　　　　},
　　　　methods: {
　　　　　　// 初始頁(yè)currentPage、初始每頁(yè)數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
　　　　　　handleSizeChange: function (size) {
　　　　　　this.pagesize = size;
　　　　　　console.log(this.pagesize) //每頁(yè)下拉顯示數(shù)據(jù)
　　　　　},
　　　　　　handleCurrentChange: function(currentPage){
　　　　　　　　this.currentPage = currentPage;
　　　　　　　　document.documentElement.scrollTop = 0;//點(diǎn)擊翻頁(yè)的時(shí)候回到頂部
　　　　　　　　console.log(this.currentPage) //點(diǎn)擊第幾頁(yè)
　　　　　　},
　　　　　},
　　// 訂單列表搜索關(guān)鍵字
　　　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.分頁(yè)的CSS只是自己修改的部分，如有需要，請(qǐng)自行腦補(bǔ)。對(duì)了，補(bǔ)充一句，修改Eleement樣式時(shí)，先在樣式前加 /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.如有問(wèn)題，歡迎指教。

附上效果圖一份：

總結(jié)

以上所述是小編給大家介紹的Vue 實(shí)現(xiàn)分頁(yè)與輸入框關(guān)鍵字篩選功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: