vuejs實現(xiàn)本地數(shù)據(jù)的篩選分頁功能思路詳解

今天項目需要一份根據(jù)本地數(shù)據(jù)的篩選分頁功能，好吧，本來以為很簡單，網(wǎng)上搜了搜全是ajax獲取的數(shù)據(jù)，這不符合要求啊，修改起來太費力氣，還不如我自己去寫，不多說直接上代碼

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、西峰網(wǎng)站維護、網(wǎng)站推廣。

效果圖：

vuejs實現(xiàn)本地數(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('財務');
          });
          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)聽。可以減少很多代碼
  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">財務部</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">
          <h6 class="fl">告警策略報表統(tǒng)計</h6>
          <div class="btn fl">
            主機名稱&nbsp;<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()">&lt;</li>
            <!--<li @click="jemppage($event)">1</li>-->
            <li v-for="list in listnum" @click="jemppage(list)">{{list}}</li>
            <li @click="nextlist()">&gt;</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ù)的篩選分頁功能思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)頁標題：vuejs實現(xiàn)本地數(shù)據(jù)的篩選分頁功能思路詳解
鏈接地址：http://www.muchs.cn/article30/ijcjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、網(wǎng)站營銷、網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)站維護、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司