vue2.x+element table 分页

前言：element--ui暂时没带分页的table组件，我们可以利用el-pagination来配合

重点：table的数据利用数组方法slice进行分割

1.html方面：table的数据利用数组方法slice进行分割，pagination看文档配置自己需要的参数即可

<el-table
   border
   highlight-current-row
   :data="tableDataShow.slice(pageSize*(currentPage-1),pageSize*currentPage)"
>
</el-table>

<el-pagination
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   :current-page="currentPage"
   :page-sizes="[10,20,50,100]"
   :page-size ="pageSize"
   :total ="tableDataShow.length"
   layout="total,sizes,prev,pager,next,jumper"
   style="padding-top:10px"
>

</el-pagination>

2.在script方面： 数据设置pageSize,一页几条，currentPage,当前第几页

export default {
   data(){
      return{
         tableDataShow: [],
         currentPage: 1,
         pageSize: 10,

      }
   },
   methods:{
         handleSizeChange(val){
            this.pageSize = val;
         },
         handleCurrentChange(val){
            this.currentPage = val;
         },
   }
}