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

一、效果图

 二、方法

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

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

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

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

    <el-table :data="tableData"
              :header-cell-style="{background:'#eaeaea'}" stripe>
      <el-table-column prop="date" label="日期" width="140">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="job" label="职业" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
    

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

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

:current-page=>当前第几页

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

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

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

:total=>数据总数

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>

第三步，配置展示的数据

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)"

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

<template>
  <div class="block">
    <p>共<span style="color: #ffd04b">{{tableData.length}}</span>条数据</p>
    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              :header-cell-style="{background:'#eaeaea'}" stripe>
      <el-table-column prop="date" label="日期" width="140">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="job" label="职业" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'test2',
  methods: {
    // @size-change页码展示数量点击事件
    handleSizeChange (val) {
      // 更新每页展示数据size
      this.pageSize = val
    },
    // @current-change页码点击事件
    handleCurrentChange (val) {
      // 更新当前页数是第几页
      this.currentPage = val
    }
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [
        {
          date: '2016-05-02',
          name: '橘右京',
          job: '刺客',
          address: '上海市普陀区金沙江路 1518'
        },
        {
          date: '2016-05-03',
          name: '娜可露露',
          job: '刺客',
          address: '上海市普陀区金沙江路 1517'
        },
        {
          date: '2016-05-04',
          name: '鲁班七号',
          job: '射手',
          address: '上海市普陀区金沙江路 1519'
        },
        {
          date: '2016-05-05',
          name: '云中君',
          job: '刺客',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-06',
          name: '干将莫邪',
          job: '法师',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-07',
          name: '不知火舞',
          job: '法师',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-08',
          name: '沈梦溪',
          job: '法师',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-09',
          name: '百里守约',
          job: '刺客',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-10',
          name: '马可波罗',
          job: '射手',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-11',
          name: '孙尚香',
          job: '射手',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-12',
          name: '赵云',
          job: '刺客',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-13',
          name: '钟无艳',
          job: '战士',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-14',
          name: '杨玉环',
          job: '法师',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-15',
          name: '鲁班大师',
          job: '辅助',
          address: '上海市普陀区金沙江路 1516'
        }
      ]
    }
  }
}
</script>