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...