vuejs實現本地數據的篩選分頁

時間 2019-12-10

標籤 vuejs 實現本地數據篩選分頁简体版

原文原文鏈接

今天項目須要一份根據本地數據的篩選分頁功能，好吧，原本覺得很簡單，網上搜了搜全是ajax獲取的數據，這不符合要求啊，修改起來太費力氣，還不如我本身去寫，很少說直接上代碼css

效果圖：html

項目須要：點擊左側進行數據篩選，實現自動分頁，自動生成頁數，點擊自動跳轉vue

項目代碼：js代碼ajax

var subList=new Vue({
    el:'#main',
    data:{
        // subcontentData爲本地數據
        subContents:subcontentData,
        // 頁面須要展示的數據
        yemiandata:[],
        // 頁面展示條數
        datanum:12,
        // 開始椰樹
        startnum:0,
        // 結束椰樹
        endnum:1,
        // 一共多少頁
        btnnum:0,
        // 生成切換頁面的按鈕用
        listnum:[],
        // input跳轉
        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('報關');
                    });
                    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;
            }
        },
        // 分野函數
        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();


        },
        // 下一頁函數
        nextlist(){
            if(this.endnum>= this.btnnum){
                alert('最後一頁了');

                return false;
            }
            this.endnum++;
            this.startnum++;





        },
        // 上一頁函數
        prevlist(){
            if(this.startnum<= 0){
                alert('第一頁了');

                return false;
            }
            this.endnum--;
            this.startnum--;




        },
        // 按鈕跳轉到制定的頁面
        jemppage(list){
            this.startnum=list-1;
            this.endnum=list;
        },
        // input跳抓
        goindex(){
            console.log(parseInt(this.jemp));
            if(parseInt(this.jemp)>this.btnnum){alert('請輸入合法參數');return}
            this.endnum=this.jemp;
            this.startnum=this.jemp-1;
        }

    },
    // 使用一個監聽。能夠減小不少代碼
    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節點代碼：數組


<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">報關科</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">
                    <h5 class="fl">告警策略報表統計</h5>
                    <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>員工狀態</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>


說下思路：首先咱們須要本地一組數據，經過vue添加到頁面中，第二步咱們須要作好分頁，那麼能夠寫一個函數對吧，因此有了下面的fenye（命名不規範，大蝦勿怪）函數，所謂分頁無非就是把一個大數據分紅每一個小頁面去展示，因此我寫了一個專門用來展示的數組，也就是yemiandata（一樣不規範，我說由於我作的網站內容太多了，因此命名已經用盡了，大家信麼），以後咱們須要獲得多少個頁面，並變成一個btn按鈕，爲了省事，我增長了一個watch：用來監聽startnum（開始頁數）他變化的話就改變展示。
第三步：分頁的話確定要有上一頁下一頁，這個就簡單多了下一頁就是startnum和endnum都增長一，上一頁反之。
第四步：也要有點擊頁數的按鈕進行跳轉，這個也不難，就是讓按鈕點下去跳轉到指定頁，可是去寫函數麼？不現實對吧，因此我用了一個數組listnum存放多少個按鈕，這裏解釋下爲何不用變量用數組，由於vue中v-for不支持變量循環，因此我改用數組，方便前面html生成節點。
第五步說了須要作篩選，篩選的話就是吧須要展示的素組變成包含制定關鍵詞的，filters函數，利用js的filter和includes進行篩選，作完看看，失敗了，出現了不少undefind,爲何？仔細看看沒有重置數組，致使第二次篩選是在第一次篩選完的基礎篩選。那就重置一下咯，再看看，搞定！
大致思路就是這樣，有不明白的小夥伴能夠添加我qq：421217189.

        最後由於是本身公司的項目因此有部分代碼是我公司項目須要，例以下啦框，css代碼就不進行分享了。小夥伴們自行發揮。有任何不明白的能夠討論

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。