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="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里数据较长，耐心点找，哈哈）

css样式部分（可忽略）

到这里，效果已经出来了，直接上图，点击页码 table内容已经绑定

下面我们来分析代码，table不谈，这里主要讨论分页部分，

首页是给el-table部分绑定数据：如图

js部分的变动：

，

不懂total pagesize  currentPage作用的可以看下文档，来回调下值试试，我上面也作了注释。

至此，分页与el-table的绑定完成，当然实际项目中 上面的data数据值都要通过后台异步加载的，这里主要为了展示方便，更多的问题可以留言一起讨论。

 

转载于:https://www.cnblogs.com/sxgxiaoge/p/9394345.html