vue实践-分页实现

element.js

import { Pagination } from 'element-ui'
Vue.use(Pagination)

分页代码

   <el-card>  
    <el-pagination
        style="margin-top: 20px"
        background
        @size-change="btnSearch"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
     </el-pagination>
    </el-card>

export default {}

export default {
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 5,
        totalPage: 3,
        total: 11
            },
         }
      }
  }