vue element實現分頁加分組

2021-10-05 09:39:10 字數 1937 閱讀 8968

for

(let i =

1; i <=

this

.total; i++)}

這個迴圈是拿到資料的總數 以此判斷取餘數 陣列的最大長度是 10 如果資料量龐大可以考慮把i換成固定的

pagedata.length ===

0? tabledata:pagedata

利用vue的渲染方式 提供兩個資料的副本 乙個放全部資料 乙個放所進行的分頁的副本 利用三木判斷 放分頁的副本是否

有東西 有則渲染副本而非全部

@size-change=

"handlesizechange"

@current-change=

"handlecurrentchange"

:current-page=

"currentpage4"

:page-sizes=

"pagesizes"

:page-size=

"pagesize"

layout=

"total, sizes, prev, pager, next, jumper"

:total=

"total"

>

<

/el-pagination>

提供分頁的element元件

total:1,

pagesize:0,

pagesizes:

, val:0,

pagedata:

所需的引數

handlesizechange

(val)

條`)this

.val = val

let a =

json

.parse

(json

.stringify

(this

.tabledata)

)this

.pagedata = a.

splice(0

, val)},

對全部資料進行深拷貝 避免splice破壞陣列 而造成分頁完完 資料完

因為this

.pagedata 是乙個空陣列 直接把分頁的結果付給他 利用vue的雙向繫結來進行資料的實時更新

這裡是當選擇分頁每頁顯示多少條資料以後 可以立刻進行分頁

handlecurrentchange

(val)

這裡a依然是對總的資料的乙個深拷貝 因為之前已經儲存this

.val當前是一頁儲存多少條資料

獲取一夜顯示的資料 同時利用他來進行從什麼位置取到

什麼位置 和取幾條 位置的計算是拿當前的頁數乘上當前的顯示數量又因為js的陣列處理是從0開始所以

應該減去這個數量 就是當前的位置

例如 資料是[0,

1,2,

3,4] 一頁顯示2條資料 當前為第2頁 它在資料中擷取的位置(非js中)是 2

*2 即下回從第四個資料開始

數字理應是從4開始

但是 資料預設的是 012

34 而非是從 1開始的這個時候會產生乙個位置錯位 即他是從三開始

所以要減去

this

.pagedata 依然是取資料 擷取

(當前的頁數 * 當前的數量 -

1(是因為js在位置上是從0開始的)

,擷取多少數量 )

進行顯示

小乾貨

js 物件新增 刪除 修改 屬性

var a=;

//新增屬性

a.age=18;

console.log(a);

//結果:object

//修改屬性

a.age=「我怎麼知道」;

//結果:object

//刪除屬性

delete a.age;

//結果:object

vue element分頁器元件封裝

分頁元件 分頁元件的封裝 pagination size change sizechange current change currentchange page sizes 1,5,10 layout total,sizes,prev,pager,next,jumper current page.s...

vue element路由跳轉保留分頁狀態問題處理

情景描述 1.點選跳轉到另乙個路由,使用路由go 1 回到上乙個路由 2.使用路由元資料meta儲存分頁資訊,在點選跳轉按鈕是儲存 3.go 1 回到上乙個路由時取出路由中的分頁資訊重新渲染頁面 問題描述 從 中強制將currentpage強制設定為保留資料,可以請求到保留頁資料,但是分頁的元件為初...

vue element 實現樹結構

話不多說直接先上圖 allxzlist 這個是獲取的全部的值 props1 這個是我們要展示的模板 defaultcheckedkeys 這個是獲取詳情或者想要設定的預設值 defaultexpandedkeys 這個是獲取詳情或者想要設定的預設值 handlecheckchange data,ch...