vuejs實現(xiàn)本地數(shù)據(jù)的篩選分頁功能思路詳解
更新時間：2017年11月15日 10:29:11 作者：金振宗
今天做項目需要一份根據(jù)本地數(shù)據(jù)的篩選分頁功能，下面小編把vuejs實現(xiàn)本地數(shù)據(jù)的篩選分頁功能的實現(xiàn)思路分享到腳本之家平臺，需要的朋友可以參考下
今天項目需要一份根據(jù)本地數(shù)據(jù)的篩選分頁功能，好吧，本來以為很簡單，網(wǎng)上搜了搜全是ajax獲取的數(shù)據(jù)，這不符合要求啊，修改起來太費力氣，還不如我自己去寫，不多說直接上代碼
效果圖：
項目需要：點擊左側(cè)進行數(shù)據(jù)篩選，實現(xiàn)自動分頁，自動生成頁數(shù)，點擊自動跳轉(zhuǎn)
項目代碼：js代碼
var subList=new Vue({
el:'#main',
data:{
// subcontentData為本地數(shù)據(jù)
subContents:subcontentData,
// 頁面需要展現(xiàn)的數(shù)據(jù)
yemiandata:[],
// 頁面展現(xiàn)條數(shù)
datanum:12,
// 開始椰樹
startnum:0,
// 結(jié)束椰樹
endnum:1,
// 一共多少頁
btnnum:0,
// 生成切換頁面的按鈕用
listnum:[],
// input跳轉(zhuǎn)
jemp:1,
},
methods:{
filters(num){
this.subContents=subcontentData;
// 需要重置防止翻頁導致startnum和endnum不一致
this.startnum=0;
this.endnum=1;
// 這里是判斷篩選按鈕
switch(num){
case 0: $('#sublist li').css({
background:'#f2f2f2'
}).eq(0).css({
background:'#dbe9f0'
});
this.fenye();
break;
case 1:
$('#sublist li').css({
background:'#f2f2f2'
}).eq(1).css({
background:'#dbe9f0'
});
this.subContents=this.subContents.filter(num=>{
return String(num['department']).includes('行政');
});
this.fenye();
break;
case 2:
$('#sublist li').css({
background:'#f2f2f2'
}).eq(2).css({
background:'#dbe9f0'
});
this.subContents=this.subContents.filter(num=>{
return String(num['department']).includes('報關(guān)');
});
this.fenye();
break;
case 3:
$('#sublist li').css({
background:'#f2f2f2'
}).eq(3).css({
background:'#dbe9f0'
});
this.subContents=this.subContents.filter(num=>{
return String(num['department']).includes('組裝');
});
this.fenye();
break;
case 4:
$('#sublist li').css({
background:'#f2f2f2'
}).eq(4).css({
background:'#dbe9f0'
});
this.subContents=this.subContents.filter(num=>{
return String(num['department']).includes('電子');
});
this.fenye();
break;
case 5:
$('#sublist li').css({
background:'#f2f2f2'
}).eq(5).css({
background:'#dbe9f0'
});
this.subContents=this.subContents.filter(num=>{
return String(num['department']).includes('工藝');
});
this.fenye();
break;
case 6:
$('#sublist li').css({
background:'#f2f2f2'
}).eq(6).css({
background:'#dbe9f0'
});
this.subContents=this.subContents.filter(num=>{
return String(num['department']).includes('財務(wù)');
});
this.fenye();
break;
case 7:
$('#sublist li').css({
background:'#f2f2f2'
}).eq(7).css({
background:'#dbe9f0'
});
this.subContents=this.subContents.filter(num=>{
return String(num['department']).includes('制造');
});
this.fenye();
break;
case 8:
$('#sublist li').css({
background:'#f2f2f2'
}).eq(8).css({
background:'#dbe9f0'
});
this.subContents=this.subContents.filter(num=>{
return String(num['department']).includes('銷售');
});
this.fenye();
break;
}
},
// 分野函數(shù)
fenye(){
this.yemiandata=this.subContents.slice(this.startnum*this.datanum,this.endnum*this.datanum);
this.btnnum=Math.ceil(this.subContents.length/this.datanum);
this.listnum=[];
for(i=0;i<this.btnnum;i++){
this.listnum[i]=i+1;
}
btnwidth();
},
// 下一頁函數(shù)
nextlist(){
if(this.endnum>= this.btnnum){
alert('最后一頁了');
return false;
}
this.endnum++;
this.startnum++;
},
// 上一頁函數(shù)
prevlist(){
if(this.startnum<= 0){
alert('第一頁了');
return false;
}
this.endnum--;
this.startnum--;
},
// 按鈕跳轉(zhuǎn)到制定的頁面
jemppage(list){
this.startnum=list-1;
this.endnum=list;
},
// input跳抓
goindex(){
console.log(parseInt(this.jemp));
if(parseInt(this.jemp)>this.btnnum){alert('請輸入合法參數(shù)');return}
this.endnum=this.jemp;
this.startnum=this.jemp-1;
}
},
// 使用一個監(jiān)聽?？梢詼p少很多代碼
watch:{
startnum(n,o){
this.yemiandata=this.subContents.slice(n*this.datanum,(parseInt(n)+1)*this.datanum);
}
}
});
subList.filters(0);
subList.fenye();
// 封裝一下底部btn方法 底部自動大小
function btnwidth(){
$('#fbtn').css({
width:(subList.listnum.length+2)*40+293+'px',
marginLeft:-((subList.listnum.length+2)*40+293)/2+'px'
})
}
btnwidth();
下面是html節(jié)點代碼：
<div class="main_content">
<div class="table2_nav">
<ul id="sublist">
<li @click="filters(0)"><div class="blockcenter">部門分類（部門8／8）</div></li>
<li @click="filters(1)"><div class="blockcenter">行政部</div></li>
<li @click="filters(2)"><div class="blockcenter">報關(guān)科</div></li>
<li @click="filters(3)"><div class="blockcenter">組裝部</div></li>
<li @click="filters(4)"><div class="blockcenter">電子部</div></li>
<li @click="filters(5)"><div class="blockcenter">工藝部</div></li>
<li @click="filters(6)"><div class="blockcenter">財務(wù)部</div></li>
<li @click="filters(7)"><div class="blockcenter">制造部</div></li>
<li @click="filters(8)"><div class="blockcenter">銷售部</div></li>
</ul>
</div>
<div class="table2_content">
<div class="col-title bg-fff clearfix">
<h5 class="fl">告警策略報表統(tǒng)計</h5>
<div class="btn fl">
主機名稱 <span class="caret"></span>
<div class="btn_down">
<ul>
<li>下啦</li>
<li>下啦2</li>
</ul>
</div>
</div>
<div class="fl btn2">
添加
</div>
</div>
<table width="1410px" class="table" id="tablelist tab">
<tr>
<th>工號</th>
<th>姓名</th>
<th>部門名稱</th>
<th>性別</th>
<th>籍貫</th>
<th>員工狀態(tài)</th>
<th>入職時間</th>
<th>離職時間</th>
<th>離職類別</th>
</tr>
<tr v-for="subContent in yemiandata">
<td>{{subContent.num}}</td>
<td>{{subContent.name}}</td>
<td>{{subContent.department}}</td>
<td>{{subContent.sex}}</td>
<td>{{subContent.addres}}</td>
<td>{{subContent.staic}}</td>
<td>{{subContent.jointime}}</td>
<td>{{subContent.leavetime}}</td>
<td>{{subContent.type}}</td>
</tr>
</table>
<div class="vuetab clearfix">
<ul class="fbtn clearfix" id="fbtn">
<li @click="prevlist()"><</li>
<!--<li @click="jemppage($event)">1</li>-->
<li v-for="list in listnum" @click="jemppage(list)">{{list}}</li>
<li @click="nextlist()">></li>
<div id="pages">共{{btnnum}}頁</div>
<div id="gotoindex">到第 <input type="text" :value="jemp" v-model="jemp" id="inputnum"> 頁</div>
<button id="gobtn" @click="goindex()">確定</button>
</ul>
</div>
</div>
</div>
說下思路：首先我們需要本地一組數(shù)據(jù)，通過vue添加到頁面中，第二步我們需要做好分頁，那么可以寫一個函數(shù)對吧，所以有了下面的fenye（命名不規(guī)范，大蝦勿怪）函數(shù)，所謂分頁無非就是把一個大數(shù)據(jù)分成每個小頁面去展現(xiàn)，所以我寫了一個專門用來展現(xiàn)的數(shù)組，也就是yemiandata（同樣不規(guī)范，我說因為我做的網(wǎng)站內(nèi)容太多了，所以命名已經(jīng)用盡了，你們信么），之后我們需要得到多少個頁面，并變成一個btn按鈕，為了省事，我增加了一個watch：用來監(jiān)聽startnum（開始頁數(shù)）他變化的話就改變展現(xiàn)。
第三步：分頁的話肯定要有上一頁下一頁，這個就簡單多了下一頁就是startnum和endnum都增加一，上一頁反之。
第四步：也要有點擊頁數(shù)的按鈕進行跳轉(zhuǎn)，這個也不難，就是讓按鈕點下去跳轉(zhuǎn)到指定頁，但是去寫函數(shù)么？不現(xiàn)實對吧，所以我用了一個數(shù)組listnum存放多少個按鈕，這里解釋下為什么不用變量用數(shù)組，因為vue中v-for不支持變量循環(huán)，所以我改用數(shù)組，方便前面html生成節(jié)點。
第五步說了需要做篩選，篩選的話就是吧需要展現(xiàn)的素組變成包含制定關(guān)鍵詞的，filters函數(shù)，利用js的filter和includes進行篩選，做完看看，失敗了，出現(xiàn)了很多undefind,為什么？仔細看看沒有重置數(shù)組，導致第二次篩選是在第一次篩選完的基礎(chǔ)篩選。那就重置一下咯，再看看，搞定！
總結(jié)
以上所述是小編給大家介紹的vuejs實現(xiàn)本地數(shù)據(jù)的篩選分頁功能思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法
這篇文章主要介紹了Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
ESLint是一個靜態(tài)代碼分析工具,用于檢查JavaScript代碼的語法結(jié)構(gòu)和查找程序錯誤,Prettier是一個代碼格式化工具,這篇文章主要給大家介紹了關(guān)于Vue2老項目配置ESLint和Prettier的完整步驟,需要的朋友可以參考下2024-08-08
vue2.0設(shè)置proxyTable使用axios進行跨域請求的方法
這篇文章主要介紹了vue2.0設(shè)置proxyTable使用axios進行跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了使用Vant完成Dialog彈框案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中使用sass及解決sass-loader版本過高導致的編譯錯誤問題
這篇文章主要介紹了vue中使用sass及解決sass-loader版本過高導致的編譯錯誤問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js添加一些觸摸事件以及安裝fastclick的實例
今天小編就為大家分享一篇vue.js添加一些觸摸事件以及安裝fastclick的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了關(guān)于vue-cli3打包代碼后白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue?大文件分片上傳(斷點續(xù)傳、并發(fā)上傳、秒傳)
本文主要介紹了vue?大文件分片上傳，主要包括斷點續(xù)傳、并發(fā)上傳、秒傳，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了Vue CLI 3搭建vue+vuex最全分析(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue實現(xiàn)el-table點選和鼠標框選功能的方法
在Vue中我們經(jīng)常需要處理表格數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)el-table點選和鼠標框選功能的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10