關(guān)于Elementui中toggleRowSelection()方法實(shí)現(xiàn)分頁(yè)切換時(shí)記錄之前選中的狀態(tài)
Elementui中toggleRowSelection()方法實(shí)現(xiàn)分頁(yè)切換時(shí)記錄之前選中的狀態(tài)
先說(shuō)下需求
表格導(dǎo)出功能。
用戶可以自定義選擇導(dǎo)出的表格數(shù)據(jù)。
遇到的問題
使用el-table組件的selection屬性，可以實(shí)現(xiàn)多選表格數(shù)據(jù)的功能。
但是el-table組件在翻頁(yè)的時(shí)候，不會(huì)記錄上一頁(yè)的選項(xiàng)，再切換回上一頁(yè)時(shí)，之前勾選過(guò)的選項(xiàng)會(huì)被清空。
解決方案
使用toggleRowSelection()方法設(shè)置勾選項(xiàng)。
思路
之前是使用一個(gè)數(shù)組記錄當(dāng)前頁(yè)選中的選項(xiàng)，現(xiàn)在用一個(gè)數(shù)組記錄每一頁(yè)選中的選項(xiàng)。
Step1：
在selection-change事件中綁定以下方法。
需要注意的是，每次換頁(yè)的時(shí)候，如果之前有勾選選項(xiàng)，則表格選擇項(xiàng)會(huì)發(fā)生變化（之前勾選，換頁(yè)之后不勾選），觸發(fā)該函數(shù)，所以需要在換頁(yè)時(shí)增加一個(gè)標(biāo)志量，判斷是由于換頁(yè)觸發(fā)的該函數(shù)還是由于勾選變化觸發(fā)的該函數(shù)。
Step2：
在換頁(yè)之后，使用toggleRowSelection() 方法，將之前勾選中的選項(xiàng)重新勾選。
我之前是放在換頁(yè)函數(shù)中的，發(fā)現(xiàn)沒有重新渲染，參考這篇文章后：
得知了toggleRowSelection() 函數(shù)需要在頁(yè)面渲染完畢之后才有效，而每次換頁(yè)，數(shù)據(jù)都會(huì)進(jìn)行更新，要重新渲染頁(yè)面，所以需要放在this.$nextTick中
于是，代碼如下：
這樣，就能在換頁(yè)時(shí)，將原來(lái)在該頁(yè)勾選的數(shù)據(jù)重新選中了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展甘特圖的方法詳解
Ganttastic是一個(gè)小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個(gè)可配置的、可拖動(dòng)的甘特圖。本文就將用它來(lái)實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展的甘特圖，感興趣的可以嘗試一下2022-11-11
Vue報(bào)錯(cuò)error:0308010C:digital?envelope?routines::unsupported
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)error:0308010C:digital?envelope?routines::unsupported的解決方法,文中通過(guò)圖文將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項(xiàng)目中遇到的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了vue引用echarts餅圖不顯示圖例的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了Vue的mixin策略的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
在現(xiàn)代前端開發(fā)中,隨著應(yīng)用復(fù)雜度的不斷提升,組件狀態(tài)管理成為構(gòu)建高效、可維護(hù)的Vue應(yīng)用的核心問題,本文將介紹多種管理組件狀態(tài)的方法,需要的朋友可以參考下2025-03-03
vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示的實(shí)現(xiàn)
這篇文章主要介紹了vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vuejs第六篇之Vuejs與form元素實(shí)例解析
本文通過(guò)實(shí)例給大家詳細(xì)介紹了Vuejs與form元素的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了深入了解Vue動(dòng)態(tài)組件和異步組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue組件的相關(guān)知識(shí)，感興趣的朋友可以了解下2021-01-01
本文通過(guò)實(shí)例代碼給大家介紹了vue中的inject學(xué)習(xí)教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-04