vue+element-ui 實現分頁（根據el-table內容變換的分頁）

官方例子

  　　官方提示：

　　　　設置layout，表示需要顯示的內容，用逗號分隔，布局元素會依次顯示。prev表示上一頁，next為下一頁，pager表示頁碼列表，除此以外還提供了jumper和total，size和特殊的布局符號->，->后的元素會靠右顯示，jumper表示跳頁元素，total表示顯示頁碼總數，size用於設置每頁顯示的頁碼數量。

　　

<div class="block">
  <span class="demonstration">頁數較少時的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div>
<div class="block">
  <span class="demonstration">大於 7 頁時的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>

效果截圖如下

 

我自己的項目中用到了el-table 索性完全貼出來了： 先貼代碼

<template>
        <div class="title">
            <span>總數量：3223個</span>
            <el-button  icon="el-icon-setting" class="fl">操作</el-button>
            <el-select v-model="value5" multiple placeholder="標記" class="fl">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="value5" multiple placeholder="篩選項" class="fl">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
            <div class="demo-input-suffix fl">
                  <el-input
                    placeholder="請輸入APP名稱或運營商名稱"
                    prefix-icon="el-icon-search"
                    v-model="input21">
                  </el-input>
            </div>
            <div class="container_table">
                <el-table 
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                stripe
                style="width: 100%"
                 :default-sort = "{prop: 'date', order: 'descending'}"
                >
                 <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="appname"
                  label="APP名稱"
                  sortable
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="apkname"
                  label="包名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="type"
                  sortable
                  label="類型">
                </el-table-column>
                <el-table-column
                  prop="comp_name"
                  sortable
                  label="運營企業名稱">
                </el-table-column>
                <el-table-column
                  prop="type_number"
                  label="版本號">
                </el-table-column>
                <el-table-column
                  prop="update_date"
                  sortable
                  label="更新時間">
                </el-table-column>
                <el-table-column
                  prop="download_num"
                  sortable
                  label="下載量（萬）">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                     <!--<el-button type="warning" icon="el-icon-star-off" circle></el-button>-->
                     <el-button type="primary" icon="el-icon-star-on" v-if="istag" @click='switchChange'></el-button>
                     <el-button type="primary" icon="el-icon-star-off" v-else="!istag" @click='switchChange'></el-button>
                  </template>
                </el-table-column>
             </el-table>
                  <el-pagination class="fy"
                     layout="prev, pager, next"
                     @current-change="current_change"
                     :total="total"
                     background
                    >
                  </el-pagination>
            </div>
        </div>    
</template>

js部分（為展示分頁效果，所以data里數據較長，耐心點找，哈哈）

<script>
     export default {
         name:'list11',
        data() {
          return {
               total:1000,//默認數據總數
            pagesize:9,//每頁的數據條數
            currentPage:1,//默認開始頁面
               istag: true,
              input:"",
           input21: '',
            options: [{
          value: '選項1',
          label: '黃金糕'
        }, {
          value: '選項2',
          label: '雙皮奶'
        }, {
          value: '選項3',
          label: '蚵仔煎'
        }, {
          value: '選項4',
          label: '龍須面'
        }, {
          value: '選項5',
          label: '北京烤鴨'
        }],
        value5: [],
        tableData: [
        {
          appname: '1喵喵直播',
          apkname: '1bdkdl',
          type: '3視頻直播',
          comp_name: '1廣大科技公司',
          type_number: '1V1.2',
          update_date: '12016-05-02',
          download_num: '123.6'
        },
        {
          appname: '2喵喵直播',
          apkname: '2bdkdl',
          type: '2視頻直播',
          comp_name: '2廣大科技公司',
          type_number: '2V1.2',
          update_date: '22016-05-02',
          download_num: '223.6'
        },
        {
          appname: '3喵喵直播',
          apkname: '1bdkdl',
          type: '3視頻直播',
          comp_name: '3廣大科技公司',
          type_number: '3V1.2',
          update_date: '32016-05-02',
          download_num: '323.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        {
          appname: '4喵喵直播',
          apkname: '4bdkdl',
          type: '4視頻直播',
          comp_name: '4廣大科技公司',
          type_number: '4V1.2',
          update_date: '42016-05-02',
          download_num: '423.6'
        },
        ]
          };
        } ,
         methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'th';
        }
        return '';
      },
      switchChange(){
          this.istag = !this.istag ;
          
      },

     current_change:function(currentPage){
        this.currentPage = currentPage;
      }
    },
      created:function(){
         this.total=this.tableData.length;
      },
      };
</script>

 

 

css樣式部分（可忽略）

<style>
    .fl{
        float: right;
        margin-right:20px;
    }
    .fy{
        text-align:center;
        margin-top:30px;
    }
    .title{
        height:100%;
    }
</style>

到這里，效果已經出來了，直接上圖，點擊頁碼 table內容已經綁定

下面我們來分析代碼，table不談，這里主要討論分頁部分，

首頁是給el-table部分綁定數據：如圖

js部分的變動：

，

不懂total pagesize  currentPage作用的可以看下文檔，來回調下值試試，我上面也作了注釋。

至此，分頁與el-table的綁定完成，當然實際項目中 上面的data數據值都要通過后台異步加載的，這里主要為了展示方便，更多的問題可以留言一起討論。

補充：當前分頁總數據不是太多，項目是自己用，加上我們這時候的需求正好也是前端拿到所有數據來操作分頁，所以此demo有效，然而問題來了，其實實際項目中還是采用服務端進行分頁的居多（如傳page，limit等字段給后端接口，然后返回給你篩選頁的數據）。在此補充一下服務端分頁：

vue+element-ui 實現分頁（二）（根據el-table內容變換的分頁）