vue+elementui表格分页

<template>
 <div>
 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
 <!-- 限制data的不同段数,造成换页的感觉 -->
   <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="address" label="地址"></el-table-column>
 </el-table>
 <div>
 <el-pagination
 @current-change="currentChange"
 layout="prev, pager, next"
 :page-size="pageSize"
 :total="total">
 </el-pagination>
 </div>
 </div>
</template>

<script>
export default {
    data() {
      let item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 路'
      };
      let testData = Array(20).fill(item);
      return {
        total:20,//数据总条数,后端化,自动决定页数,不会让数组越界的
        pageSize: 6,//显示数据条数
        currentPage: 1,//初始页面
        tableData: testData,//注入假数据数组
      }
    },
    methods:{
      currentChange(currentPage){
        this.currentPage = currentPage;
      }
    },
  };
</script>

 

posted @ 2019-08-20 16:42  jinc的学习笔记  阅读(211)  评论(0)    收藏  举报