參考了這位大佬的部落格（經過自己的修改，與elementui分頁外掛程式相結合，實現了前端元件分頁
效果圖如下：
每頁幾條，前往幾頁，均可使用。下面直接上**
一、定義變數
data()
,{},{}]
rightslist:
,// 分頁資料,這裡用來儲存每頁切割後的資料
// 看起來格式是這樣的[[{},{},{}],[{},{},{}]]
// 陣列內套陣列，每個陣列就是一頁資料
totalpagedata:
,// 共幾頁
pagenum:1,
// 每頁顯示數量
pagesize:5,
// 當前顯示頁碼
currentpage:1,
// 總共多少條資料
total:1,
// 當前要顯示的資料
datashow:
}}
1.初始化資料
// 如果想要元件在建立時就賦予資料，那麼就應該在created生命週期呼叫
created()
getrightslist()
this
.$message.
error
('許可權列表載入失敗');
}).catch
(res =>);
}
calcpagedata()
// 資料分組
for(
let i =
0; i <
this
.pagenum; i++
)// 獲取到資料後顯示第一頁內容,陣列下標是從0開始的，這裡一定要減去1，不然會丟失一組資料
this
.datashow =
this
.totalpagedata[
this
.currentpage -1]
; console.
log(
this
.datashow)
;}
// 每頁條數發生變化
handlesizechange
(newpagesize)
// 當前頁碼發生變化
handlecurrentchange
(newpagenum)
class
="common-data"
>
:data
="datashow"
border
width
="100%"
stripe
>
label
="序號"
type
="index"
width
="50"
align
="center"
>
scope
="scope"
>
>
}span
>
template
>
el-table-column
>
prop
="authname"
label
="許可權名稱"
>
el-table-column
>
prop
="path"
label
="路徑"
>
el-table-column
>
prop
="level"
label
="許可權等級"
>
slot-scope
="scope"
>
v-if
="scope.row.level === '0'
">
一級el-tag
>
type
="success"
v-else-if
="scope.row.level === '1'
">
二級el-tag
>
type
="warning"
v-else
>
**el-tag
>
template
>
el-table-column
>
el-table
>
class
="page"
>
@size-change
="handlesizechange"
@current-change
="handlecurrentchange"
:current-page
="currentpage"
:page-sizes
="[5, 10, 15, 30]"
:page-size
="pagesize"
layout
="total, sizes, prev, pager, next, jumper"
:total
="total"
background
>
el-pagination
>
div>
div>
vue Element ui 實現分頁
實現分頁功能的關鍵技術點為頁面顯示的結果處理，而此處的關鍵技術點為js的slice 方法。首先介紹slice 方法 slice 方法可從已有的陣列中返回選定的元素。slice 方法可提取字串的某個部分，並以新的字串返回被提取的部分。主要用法 array.slice start,end 引數描述 st...
vue element ui 實現分頁效果
我使用得是el table el pagination來實現的，話不多說，直接上 編輯刪除 export default inject reload 注入reload方法 data created mounted methods handlecurrentchange function curren...
vue Element ui實現分頁效果
當我們向後台請求大量資料的時候，並要在頁面展示出來，請求的資料可能上百條資料或者更多的時候，並不想在乙個頁面展示，這就需要使用分頁功能來去完成了。1.本次所使用的是vue2.0 element ui實現乙個分頁功能，element ui這個元件特別豐富，分頁中給我提供了乙個pagination 分頁...