vue使用element ui实现分页效果

<template>
     <!-- 分页 -->
        <div class="flex justify-center page">
          

  <div class="content" style="margin-top: 20px">
            <el-table :data="showList" border style="width: 100%">
           ...
          </div>

          <div class="block" style="margin-top: 20px">
            <!-- <span class="demonstration">大于 7 页时的效果</span> -->
            <el-pagination
              layout="prev, pager, next"
              :total="tableData.length"
              :page-size="pagesize"
              @current-change="current_change"
              :current-page.sync="currentPage"
            >
            </el-pagination>
          </div>
        </div>
</template>
<script>
import axios from "axios";
export default {
    name:'ListShow',
    data(){
        return{
         tableData: [],
          pagesize: 7, //每页多少数据
  		  currentPage: 1, //默认当前页为第一页
        }
    },
    methods:{
         current_change(currentPage){  //改变当前页
             this.currentPage = currentPage
         }
     },
     computed:{
    //根据当前页码所展示的数据
    showList(){
      
      //slice为数组一个方法，结果是从已有数组返回指定位置的数组，参数为起始下标和结束下标
      return this.tableData.slice((this.currentPage-1)*this.pagesize,this.currentPage-1+this.pagesize)
    }
  },
}
</script>

重点在computed，这个算vue实例的一个属性，和data，methods，onLoad这些同级。意思是’计算参数’