vue+elementui表格分页

<template>
 <div>
 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
 
   <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>

 

你可能感兴趣的:(vue+elementui表格分页)