鍍金池/ 問答/HTML/ 求Vue Element UI的Table組件跨頁多選的實(shí)現(xiàn)思路。

求Vue Element UI的Table組件跨頁多選的實(shí)現(xiàn)思路。

Vue Element UI的Table列表的CHECKBOX實(shí)現(xiàn)跨分頁多選，再次回到某頁如果某行之前已選擇則CHECKBOX要進(jìn)行回顯，最終要得到所有選擇行的集合。求實(shí)現(xiàn)思路或者解決方案。

回答
編輯回答
無標(biāo)題

1.列表渲染時(shí)在tabelData中的各元素添加一個(gè)屬性checked，默認(rèn)為false;
2.給'el-tabel'元素綁定@select 及@select-all兩個(gè)事件，在事件觸發(fā)時(shí)設(shè)置row.check=！row.check，判斷row.check分以下情況：
(1)為true時(shí)，且判斷全局?jǐn)?shù)組中沒有這個(gè)id時(shí)，將id push進(jìn)全局?jǐn)?shù)組中，如this.selectDataIds.push(id);如果已經(jīng)有這個(gè)id，那么不做處理;
(2)為false時(shí)，判斷全局?jǐn)?shù)組中有沒有該選項(xiàng)的id，如果有，那么把它從數(shù)組中去除
3.翻頁時(shí)，將會(huì)有新的數(shù)據(jù)，那么在獲取tabelData成功的接口中回調(diào)時(shí)添加全局?jǐn)?shù)組的id判斷，如果當(dāng)前渲染的id包含在this.selectDataIds中，意味著這個(gè)選項(xiàng)前期已經(jīng)選擇，需要回顯，那么將默認(rèn)的checked改為true
4.翻頁之后正常重復(fù)操作就行了

2018年1月24日 15:30
編輯回答
尕筱澄

row對(duì)象加上checked屬性 在column的template里的el-checkbox里用v-model綁定即可

2018年1月11日 19:53
編輯回答
吢丕

你好 問題解決了嗎
我也遇到同樣的問題

2017年6月10日 20:22
編輯回答
怪痞

使用緩存吧，把你頁數(shù)，當(dāng)前頁面選擇的index保存一下，再根據(jù)頁碼去取，再初始化。

2018年5月11日 01:32
編輯回答
裸橙

選中的時(shí)候把數(shù)據(jù)行的id存在一個(gè)數(shù)組中，這個(gè)數(shù)組在一頁數(shù)據(jù)加載完后遍歷一下，如果有id存在數(shù)組中就選中

2018年4月20日 08:00