vue + Element-ui 实现分页效果

这段是element-ui复制的代码

<div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>

这是效果

那他们代表什么意思呢？

  <!-- 分页 -->
    <!-- @size-change  每页条数发生变化的时候触发 -->
    <!-- @current-change  切换页码的时候触发 -->
    <!-- :current-page  当前页码数 -->
    <!-- :page-sizes 每页可选择的条数 -->
    <!-- :page-size 当前每页显示的条数 -->

..不说了直接上代码

 methods: {
// 每页条数发生变化的时候触发，这里接受一个值
        handleSizeChange(val) {
                //data中声明一个每页条数
            this.pagesize = val
            console.log(this.pagesize, 'this.pagesize');
        },
//切换页码的时候触发,接受一个值
        handleCurrentChange(val) {
                     //data中要声明一个当前页码
            this.pagenum = val
            console.log(this.pagenum, ' this.pagenum');
        }
    },

 data() {
        return {
            tableData: [],//存放数据
            pagenum: 1,//当前页
            pagesize: 2,//每条页数
        }
    },

如果请求的是json数据的话需要在获取数据的表格头部处理数据

:data="tableData.slice((pagenum - 1) * pagesize, pagenum * pagesize)"

最后把数据按需配置即可。

  //sync修饰符,可让页数和数据同步变化
 <div class="block">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="pagenum" :page-sizes="[2, 4, 6]" :page-size="pagesize"
                layout="total,sizes,prev, pager, next, jumper" :total="tableData.length">
            </el-pagination>
        </div>