var subList=new Vue({
  el:'#main',
  data:{
    // subcontentData為本地?cái)?shù)據(jù)
    subContents:subcontentData,
    // 頁(yè)面需要展現(xiàn)的數(shù)據(jù)
    yemiandata:[],
    // 頁(yè)面展現(xiàn)條數(shù)
    datanum:12,
    // 開(kāi)始椰樹(shù)
    startnum:0,
    // 結(jié)束椰樹(shù)
    endnum:1,
    // 一共多少頁(yè)
    btnnum:0,
    // 生成切換頁(yè)面的按鈕用
    listnum:[],
    // input跳轉(zhuǎn)
    jemp:1,
  },
  methods:{
    filters(num){
      this.subContents=subcontentData;
      // 需要重置防止翻頁(yè)導(dǎo)致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('報(bào)關(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('財(cái)務(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){
        alert('最后一頁(yè)了');
        return false;
      }
      this.endnum++;
      this.startnum++;
    },
    // 上一頁(yè)函數(shù)
    prevlist(){
      if(this.startnum<= 0){
        alert('第一頁(yè)了');
        return false;
      }
      this.endnum--;
      this.startnum--;
    },
    // 按鈕跳轉(zhuǎn)到制定的頁(yè)面
    jemppage(list){
      this.startnum=list-1;
      this.endnum=list;
    },
    // input跳抓
    goindex(){
      console.log(parseInt(this.jemp));
      if(parseInt(this.jemp)>this.btnnum){alert('請(qǐng)輸入合法參數(shù)');return}
      this.endnum=this.jemp;
      this.startnum=this.jemp-1;
    }
  },
  // 使用一個(gè)監(jiān)聽(tīng)。可以減少很多代碼
  watch:{
    startnum(n,o){
      this.yemiandata=this.subContents.slice(n*this.datanum,(parseInt(n)+1)*this.datanum);
    }
  }
});
  subList.filters(0);
  subList.fenye();
  // 封裝一下底部btn方法 底部自動(dòng)大小
  function btnwidth(){
    $('#fbtn').css({
      width:(subList.listnum.length+2)*40+293+'px',
      marginLeft:-((subList.listnum.length+2)*40+293)/2+'px'
    })
  }
  btnwidth();

      

        

          
部門分類（部門8／8）
          
行政部
          
報(bào)關(guān)科
          
組裝部
          
電子部
          
工藝部
          
財(cái)務(wù)部
          
制造部
          
銷售部
        
      
      

        

          
告警策略報(bào)表統(tǒng)計(jì)
          

            主機(jī)名稱 
            

              

                
下啦
                
下啦2
              
            
          
          

            添加
          
        
        

          

            
工號(hào)
            
姓名
            
部門名稱
            
性別
            
籍貫
            
員工狀態(tài)
            
入職時(shí)間
            
離職時(shí)間
            
離職類別
          
          

            
{{subContent.num}}
            
{{subContent.name}}
            
{{subContent.department}}
            
{{subContent.sex}}
            
{{subContent.addres}}
            
{{subContent.staic}}
            
{{subContent.jointime}}
            
{{subContent.leavetime}}
            
{{subContent.type}}
          
        
        

          

            
<
            
            
{{list}}
            
>
            
共{{btnnum}}頁(yè)
            
到第  頁(yè)
            確定