element ui分頁多選,翻頁記憶

2021-09-24 22:29:15 字數 1309 閱讀 5881

先說需求:實時記錄當前選中的分頁中的列表,分頁儲存資料,然後在用選中的資料進行某些操作;ps:左下角的數字為記錄的當前選中的列表的和 

直接上可用的**,前提已配置好各種環境

html部分

10">

}

js部分

export default }},

methods: ,

handleselectionchange (val) , 50)

},setselectrow()

// 標識當前行的唯一鍵的名稱

let idkey = this.idkey;

let selectallids = ;

let that = this;

this.multipleselectionall.foreach(row=>)

this.$refs.table.clearselection();

for(var i = 0; i < this.tabledata.length; i++) }},

// 記憶選擇核心方法

changepagecorerecorddata ()

// 總選擇裡面的key集合

let selectallids = ;

this.multipleselectionall.foreach(row=>)

let selectids =

// 獲取當前頁選中的id

this.multipleselection.foreach(row=>

})let noselectids = ;

// 得到當前頁沒有選中的id

this.tabledata.foreach(row=>

})noselectids.foreach(id=>}}

})},

//請求介面部分

getgoodslist();

data['page'] = this.page.currentpage;

data['pnum'] = this.page.pnum;

this.$ajax().then(val => ;

settimeout(()=>, 50)})}

},created ()

}

**可直接貼上到專案中使用,親測可用,傻瓜式**

Element table 翻頁多選

1 所有選中的資料存到乙個陣列中 selectdataarrl 2 切換 currentpage 頁碼 或 pagesize 條數 的時候 給當前資料新增選中狀態 this.refs.multipletable.togglerowselection 3 整理需要匯出的資料 1.儲存選中的內容 sel...

Element UI 的分頁元件

sizechange size 當使用者單擊任意頁碼或實現頁面跳轉時會觸發current page屬性的變化。currentchange current 擷取頁數 woekeralldata.slice pagenumber currentchangeindex 1 pagenumber curre...

element ui實現前端分頁

element ui裡的分頁元件 size change handlesizechange current change handlecurrentchange current page page page sizes 20,50,100 background page size limit lay...