官网的完整案例

 <div class="block">

    <span class="demonstration">完整功能</span>

    <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="currentPage4"

      :page-sizes="[100, 200, 300, 400]" //显示 5条/页的值

      :page-size="100"

      layout="total, sizes, prev, pager, next, jumper" //分别对应了[共33条, 5条/页,<.......>]

      :total="400"> //设置总条数

    </el-pagination>

  </div>

<script>

  export default {

    methods: {

      handleSizeChange(val) {

        console.log(`每页 ${val} 条`);

      },

      handleCurrentChange(val) {

        console.log(`当前页: ${val}`);

      }

    },

    data() {

      return {

        currentPage1: 5,

        currentPage2: 5,

        currentPage3: 5,

        currentPage4: 4

      };

    }

  }

</script>　　

 <el-table

                :data="list"

                style="width: 100%"

                @selection-change="selectItem">

            <el-table-column type="selection" width="50"></el-table-column>

            <el-table-column label="用户名"  prop="userName" width="150"></el-table-column>

            <el-table-column label="用户代码" prop="userCode" width="150"></el-table-column>

            <el-table-column label="所属机构代码" prop="comCode" width="140"></el-table-column>

            <el-table-column label="用户描述" prop="userDescription" width="300"></el-table-column>

            <el-table-column label="用户状态" align="center" prop="userState" width="100">

                <template scope="scope">

                    <div>

                        <!--                        {{ scope.row.userState | userState }}-->

                        {{scope.row.userState == 0 ? "启用" : scope.row.userState == 1 ? "禁用" : "解锁"}}

                    </div>

                </template>

            </el-table-column>

            <el-table-column label="创建时间" prop="makeDate" width="140"></el-table-column>

            <el-table-column label="操作" width="200" align="center">

                <template scope="scope">

                    <div>

            <span>

              <router-link :to="{ name: 'usersEdit', params: { id: scope.row.userCode }}"

                           class="btn-link edit-btn"> 编辑 </router-link>

            </span>

                        <span>

              <el-button size="small" type="danger" @click="confirmDelete(scope.row)">删除</el-button>

            </span>

                    </div>

                </template>

            </el-table-column>

        </el-table>

        <div class="pos-rel p-t-20">

            <btnGroup :selectedData="multipleSelection" :type="'users'"></btnGroup>

            <div class="block pages">

                <el-pagination

                        @current-change="handleCurrentChange"

                        @size-change="handleSizeChange"

                        layout="total, sizes,prev, pager, next"

                        :page-sizes="[1, 5,8, 10]"

                        :page-size="limit"

                        :current-page="page"

                        :total="total">

                </el-pagination>

            </div>

        </div>

    data() {

      return {

          list:[],

        tableData: [],

        realname: '',

        multipleSelection: [],

        pagesize: 8,

          page:1,  //对应el-pagination current-page

          limit:5,   //和:page-size 对应

          total:null, //和:total对应

      }

    },

      getAllUsers() {

        this.loading = true

        const data = {

          params: {

            realname: this.realname,

            page: this.currentPage,

            rows: this.limit

          }

        }//不要了这个是按后台分页所需要的数据

        this.apiGet('admincrud/users', data).then((res) => {

          console.log('res = ', _g.j2s(res))

          this.handelResponse(res, (data) => {

            this.tableData = data.list

            this.dataCount = data.total

              this.pageList()

          })

        })

      },

        //处理数据

        getList() {

            //es6过滤得到满足搜索条件的展示数据list

            // let list2 = this.data.filter((item, index) =>

            //     item.name.includes(this.tableData)

            // )

            let list=this.tableData;

            this.list = list.filter((item, index) =>

                index < this.page * this.limit && index >= this.limit * (this.page - 1)

            )

            this.total = list.length

        },

        // 当每页数量改变

        handleSizeChange(val) {

            console.log(`每页 ${val} 条`);

            this.limit = val

            this.getList()

        },

        // 当当前页改变

        handleCurrentChange(val) {

            console.log(`当前页: ${val}`);

            this.page = val

            this.getList()

        },

             见下一篇