Vue2.0 ElementUI實現(xiàn)表格翻頁
ElementUI的表格要求的數(shù)據(jù)類型為字典數(shù)組。在使用Python3編寫后端時,可以通過添加一行代碼`cursorclass`來從數(shù)據(jù)庫中獲取數(shù)據(jù)。獲取到數(shù)據(jù)后,可以將其存入Redis數(shù)據(jù)庫,以便之
ElementUI的表格要求的數(shù)據(jù)類型為字典數(shù)組。在使用Python3編寫后端時,可以通過添加一行代碼`cursorclass`來從數(shù)據(jù)庫中獲取數(shù)據(jù)。獲取到數(shù)據(jù)后,可以將其存入Redis數(shù)據(jù)庫,以便之后使用。在取用數(shù)據(jù)時,可以使用`eval()`函數(shù)將數(shù)據(jù)傳遞到前端。
前端分頁器
在前端頁面中,放置一個Pagination分頁器,并直接采用了完整功能的分頁器。其中,`handleSizeChange`函數(shù)用于處理pagesize發(fā)生改變時的相應(yīng)操作,`handleCurrentChange`函數(shù)用于處理currentPage發(fā)生改變時的相應(yīng)操作。`page-sizes`屬性定義了可選擇的每頁數(shù)據(jù)數(shù)。你可以根據(jù)需求自行更改其中的數(shù)字。`layout`屬性指定了附帶的功能,默認情況下不需要調(diào)整。`total`屬性表示總數(shù)據(jù)數(shù),由于數(shù)據(jù)類型為字典數(shù)組,可以直接使用`length`方法來獲取總數(shù)據(jù)數(shù)。
初始化參數(shù)和響應(yīng)函數(shù)
在代碼中,我們需要定義初始頁currentPage、初始每頁數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data。同時還需要定義兩個響應(yīng)函數(shù)`handleSizeChange`和`handleCurrentChange`,這兩個函數(shù)非常容易理解。
el-table標簽
要使當前頁顯示分頁后對應(yīng)的數(shù)據(jù),我們需要計算出當前頁的起始下標和結(jié)束下標。可以使用公式`(currentPage-1)*pagesize`到`currentPage*pagesize`來計算。然后使用`slice`方法來取出對應(yīng)的數(shù)據(jù)。在el-table標簽中,添加`stripe`屬性可以讓表格顯示斑馬紋。
column標簽
在el-table標簽中,我們可以添加多個column標簽來控制每列的顯示效果。在column標簽中,`label`屬性用于指定該列的名稱,將顯示在表頭的第一行。`prop`屬性指定了data中對應(yīng)key的名稱,用于將數(shù)據(jù)綁定到相應(yīng)的列上。
通過以上的設(shè)置,我們可以實現(xiàn)使用Vue2.0和ElementUI來實現(xiàn)表格翻頁功能。希望本文對你有所幫助。