el-pagination-前端分页

1. 前端分页（适用于小量数据）

• 缺点：下载量大，显示慢，加载时用户体验不好。如果有即时性内容，不能翻回来的时候更新。
• 优点：服务器压力请求少，换页时用户体验好。

<el-table  
   :data="TableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
   ...
</el-table>

 /*表格序列号*/
  <el-table-column label="序号" width="50px" align="center">  
      <template v-slot="scope">  
         {{ scope.$index + (currentPage - 1) * pageSize + 1 }}  
      </template>  
  </el-table-column>

/*分页*/
<el-pagination  
    background  
    @current-change="handleCurrentChange"  
    :current-page="currentPage"  
    :page-sizes="pageSizes"  
    :page-size="pageSize"  
    layout="total, sizes, prev, pager, next, jumper"  
    :total="TableData.length"  
>  
</el-pagination>

return{
    TableData: [], // 所有详情数据信息  
    currentPage: 1, //当前页码  
    pageSize:10, // 显示条数  
    pageSizes: [10,15,20], // 每页显示的行数
},
methods: {  
    handleCurrentChange(val) {  // 页面切换方法  
        this.currentPage = val;  
    }
}

2. 后端分页

• 缺点：每次换页都需要访问后端，加重服务器的压力，换页时显示慢。
• 优点：不用一次性拉取所有数据，显示快，用户体验较好。