vue——element-ui中的表格和分頁器連接起來

上面的代碼時elementUI官方示例，簡單分析一下：el-table 里面的 :data 是數據源；el-table-column 是表格里面的每一行的數據，它里面的 prop 綁定的是 :data 數據源里面的某個屬性值，由此形成一個表格。

//分頁器綁定到數據中
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
border
style="width:100%" >

     <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>

</el-table>

分頁器 el-pagination的代碼：

<el-pagination small 
layout="total,prev,pager,next,jumper" 
:total="tableData.length"
:page-size="pagesize"
pager-count="5"
:current-page="currentPage"
@current-change="handleCurrentChange"
></el-pagination>

data(){
    return{
        pagesize:5,
	    currentPage:1
    }
},
methods: {
	handleCurrentChange(val){
		this.currentPage = val;
				
	}
}

上面是elementUI關於分頁器的最全功能的代碼示例，簡單分析如下：size-change事件在當前頁面數據條數變化時觸發；current-change事件在當前頁面跳轉到其它頁時觸發；current-page 是當前所在的頁碼；page-sizes 是可選的頁面數據條數；page-size 是默認顯示的數據條數；layout 是控制分頁器的布局，里面的內容是固定的，但是可以調換位置；total 是頁面總數據條數。

那么如何將table和pagination連接起來呢？

其實很簡單，在實現上面代碼的前提下，將el-table 表格中綁定的 data 數據源做如下修改即可：

:data="tableData.slice((currentPage - 1) * pageSize, currentPage*pageSize)"

這段代碼什么意思呢？這就又涉及到基礎知識了–數組的方法，更多關於js內置對象及其方法可以參考這篇文章

首先是數組的 .slice 方法，用來截取數組，它接受收兩個參數，第一個是開始的索引值，第二個是結束的索引值。截取的數組的值放在一個新的數組中,但是不包含結束的索引對應的元素值。
所以，當前頁為第一頁時 data 數據源為 從第0條到第 pageSize 條，而當currentPage或者pageSize發生改變時，data數據源也會跟着變化，因此就實現了分頁器與表格的連接。