关于html5:vueeltable前端分页

成果：


代码：

<template>
  <div>
    <h3> 前端分页 </h3>
    <div class="table">
      <el-table
        :data="nowPageList"
        width="100%"
        :height="400"
        >
        <el-table-column
          v-for="(info,index) in header"
          header-align="center"
          :key="index"
          :property="info.key"
          :label="info.title"
          :minWidth="info.width"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
        @prev-click="prevPage"
        @next-click="nextPage"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default{data(){
    return {
      tableDataAll:[{name:"老李",age:"20"},
        {name:"老李",age:"21"},
        {name:"老李",age:"22"},
        {name:"老李",age:"23"},
        {name:"老李",age:"24"},
        {name:"老李",age:"25"},
        {name:"老李",age:"33"},
        {name:"老李",age:"34"},
      ],
      header:[
        {
          "title": "名字",
          "key": "name"
        },
        {
          "title": "年龄",
          "key": "age"
        },
      ],
      currentPage:1,
      pageSize:5,
      nowPage:{
        currentPage:this.currentPage,
        pageSize:this.pageSize
      },
      total:50,
      nowPageList:[],}
  },
  watch: {nowPage(newVal,oldVal){
      this.currentPage = newVal.currentPage
      this.pageSize = newVal.pageSize
    },
  },
  created(){this.nowPageList = this.tableDataAll.slice(0,5);
  },
  methods:{handleSizeChange(val) {
      this.pageSize = val
      this.changePage();},
    handleCurrentChange(val) {
      this.currentPage = val
      this.changePage();},
    // 上一页
    prevPage() {if (this.currentPage == 1) {return false;} else {
          this.currentPage--;
          this.changePage();}
    },
    // 下一页
    nextPage() {if (this.currentPage == this.totalPage) {return false;} else {
            this.currentPage++;
            this.changePage();}
    },
    changePage(){
      let obj ={
        currentPage:this.currentPage,
        pageSize:this.pageSize,
      }
      let currentPage = obj.currentPage
      let pageSize = obj.pageSize
      let data = JSON.parse(JSON.stringify(this.tableDataAll))
      let begin = (currentPage - 1) * pageSize;
      let end = currentPage * pageSize;
      this.nowPageList = data.slice(begin,end);
    },
  }
}

</script>