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