vue Element-UI 分頁使用(1)

 

 

  最近在使用Element-UI這套框架配合Vue來寫前端頁面。在用Element-UI來製做表格的時候，遇到了一些小問題，記錄方便學習。

其中兩個事件是關於切換當前頁和切換顯示的列表條數的。另外的屬性也能夠知道它的意思。它們都是動態綁定的。其中幾個屬性的值被存到了data中，

兩個事件的處理簡單的進行賦值。

這個時候我以爲好像就能夠了。點擊下一頁和切換顯示的列表條數。..怎麼感受表格就像大山同樣堅決！紋絲不動。因而我直接在頁面中想要顯示一下當我切換的時候表格的數據

其中tableData是我mock的假數據，存在data中。測試結果發現當我切換的時候表格綁定的這個tableData根本就沒有改變。因此理所固然的呈如今表格當中。

那麼，意思就是說切換和表格數據這二者根本就沒有聯動起來！找到問題以後就開始去思考如何解決問題。這二者是存在必定的計算關係的。由於表格的數據的長度(條數)

就是根據我切換的數值相應的變化，那麼就應該有這麼一個計算式：tableData=（(當前頁的頁數*頁的大小)-（當前頁的頁數-1）*頁的大小）

對應到程序中來就是：tableData=tableData.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize);

這個值能夠放到計算屬性computed當中,固然也能夠直接賦值給表格數據，即: <el-table :data="tableData.slice(...)"></el-table>