Element UI 分页器

 人是为活着本身而活着，而不是为了活着之外的任何事物所活着。-- 余华《活着》

• 安装 Element UI

npm i element-ui -S

•  引入组件

import { Pagination } from 'element-ui'

•  注册组件

Vue.use(Pagination)

•  搭建组件

•  声明变量

data() {
    return {
      currentPage4: 1, // 当前页，默认第一页
      total: 0, // 总条数初始化0条
      contentList: '' // 内容
    }
  },

•  初始化请求数据

created() {
    // 初始化获取第一页内容
    getInformationList({ pageNum: this.currentPage4 }).then((res) => {
      console.log(res)
      this.total = res.total
      this.contentList = res.rows 
    })
  },

•  切换页码实现分页功能

    // 分页功能
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage4 = val
      getInformationList({ pageNum: this.currentPage4 }).then((res) => {
        console.log(res)
        this.total = res.total
        this.contentList = res.rows
      })
    }