vue elment ui table分页处理(table数据太多)

　　　　　　<!--slice()剪切数组

           var num = [0,1,2,3,4,5,6,7,8,9,2]

           var newNum = num.slice(0,6)

           打印出来 的新数组newNum[0,1,2,3,4,5]

           而这里的currentPage为el-pagination组件绑定的当前展示的页码

           pagesize为当前页面最多可展示的条数

           (currentPage-1)*pagesize为当前页面的第一条数据的下标

           currentPage*pagesize 为当前页面展示的数组最后一条数据的下标

           然后再使用slice()方法将总数据剪切为页面展示需要的数据然后绑定到table里面

           -->

　　　　　　　<template>

              <el-table class="table_boder"   :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)">

　　　　　　　　　<el-table-column  align="center" prop="orderNumber" label="序号" width="50" ></el-table-column>

                <el-table-column  align="center"  prop="unit" label="单位" width="120"> </el-table-column>

　　　　　　　　</el-table>

　　　　　　　　<el-pagination class="pageCss"

                     layout="prev, pager, next"

                     @current-change="current_change"

                     :total="tableData.length"

                     background>

              </el-pagination>

　　　　　　　</template>

　　　　　　<script>

　　　　　　

　　　　export default {

　　　　　　  data() {

    　　　　　　return {

　　　　　　　　　 　　total:1000,//默认数据总数

      　　　　　　　　pagesize:10,//每页的数据条数

      　　　　　　　　currentPage:1,//默认开始页⾯

　　　　　　　　　　　　unit:'',

　　　　　　　　　　　 tableData: [],

　　　　　　　　　　}

　　　　　　　　　},

　　　　　　　　methods:{

　　　　　　　　　　getTableData(){

　　　　　　　　　　　　　　　　getAction('',{}).then((res)=>{

　　　　　　　　　　　　　　　　this.tableData = res.result

　　　　　　　　　　　　}

　　　　　　　　　　

　　　　　　　　　　current_change:function(currentPage){

      　　　　　　　　　　　　　　this.currentPage = currentPage;

      　　　　　　　　　　　　　　}

　　　　　　　　}

}

　　　　　　</script>