vue使用elementUi实现分页代码示例

前端实现数据分页示例：

效果图：

完整代码：

<template>
  <div>
    <!-- 表格内容 -->
    <el-table :data="tableData" style="width: 80%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="block">
      <el-pagination 
      	@size-change="handleSizeChange"
      	@current-change="handleCurrentChange" 
      	:current-page="currentPage"
        :page-sizes="[3, 4, 5, 6]" 
        :page-size="pagesize" 
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "foo",
  data() {
    return {
      //刷新页面后每一页有3条数据
      pagesize: 3,
      //刷新页面后当前页为第一页
      currentPage: 1,
      //总的数据
      totalData: [
        {
          date: "2016-05-02",
          name: "王尼玛",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小炮",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王大嘴",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王大米",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-04",
          name: "王小帅",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王蛋",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "洪七公",
          address: "上海市 1516 弄"
        },
        {
          date: "2016-05-04",
          name: "杨过",
          address: "上海市路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "黄蓉",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "艾伦",
          address: "上海市沙江路 1516 弄"
        },
        {
          date: "2016-05-04",
          name: "三笠",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "爱尔敏",
          address: "上海市金沙江路 1519 弄"
        }
      ]
    };
  },
  //自动更新表格里的数据
  computed: {
    tableData() {
      return this.totalData.slice(
        this.pagesize * (this.currentPage - 1),
        this.pagesize * this.currentPage
      );
    }
  },
  methods: {
    handleSizeChange(val) {
      //修改每一页的数据量
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      //修改当前页
      this.currentPage = val;
    }
  }
};
</script>

<style scoped>
</style>