基于el-table和el-pagination实现数据的分页效果

一、效果图

 

 二、方法

第一步，新建一个el-table，进行如下配置，

:data=>是用于动态json数据赋值给table，

:header-cell-style=>是设置表头的样式，

stripe=>是让table具有斑马背景色，便于观看。

第二步，新建一个el-pagination，

@size-change和@current-change=>处理页码大小和当前页变动时候触发的事件,

:current-page=>当前第几页

:page-sizes=>每页显示多少条数据的选择项

:page-size=>每页显示多少条数据

layout=>页码布局(一下是完整版)

:total=>数据总数

第三步，配置展示的数据

data () {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [
        {
          date: '2016-05-02',
          name: '橘右京',
          job: '刺客',
          address: '上海市普陀区金沙江路 1518'
        },
        {
          date: '2016-05-15',
          name: '鲁班大师',
          job: '辅助',
          address: '上海市普陀区金沙江路 1516'
        }
      ]
    }
  }

第四步，配置点击事件

methods: {
    // @size-change页码展示数量点击事件
    handleSizeChange (val) {
      // 更新每页展示数据size
      this.pageSize = val
    },
    // @current-change页码点击事件
    handleCurrentChange (val) {
      // 更新当前页数是第几页
      this.currentPage = val
    }
  }

第五步，这时候现实的数据是全部显示的，还需要实时修改显示哪些数据，修改el-table中的:table，如下即可。

:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"

到了这里就已经成功实现了，以下是完整代码：