關(guān)于Elementui中toggleRowSelection()方法實現(xiàn)分頁切換時記錄之前選中的狀態(tài)
Elementui中toggleRowSelection()方法實現(xiàn)分頁切換時記錄之前選中的狀態(tài)
先說下需求
表格導(dǎo)出功能。
用戶可以自定義選擇導(dǎo)出的表格數(shù)據(jù)。
遇到的問題
使用el-table組件的selection屬性，可以實現(xiàn)多選表格數(shù)據(jù)的功能。
但是el-table組件在翻頁的時候，不會記錄上一頁的選項，再切換回上一頁時，之前勾選過的選項會被清空。
解決方案
使用toggleRowSelection()方法設(shè)置勾選項。
思路
之前是使用一個數(shù)組記錄當(dāng)前頁選中的選項，現(xiàn)在用一個數(shù)組記錄每一頁選中的選項。
Step1：
在selection-change事件中綁定以下方法。
需要注意的是，每次換頁的時候，如果之前有勾選選項，則表格選擇項會發(fā)生變化（之前勾選，換頁之后不勾選），觸發(fā)該函數(shù)，所以需要在換頁時增加一個標(biāo)志量，判斷是由于換頁觸發(fā)的該函數(shù)還是由于勾選變化觸發(fā)的該函數(shù)。
Step2：
在換頁之后，使用toggleRowSelection() 方法，將之前勾選中的選項重新勾選。
我之前是放在換頁函數(shù)中的，發(fā)現(xiàn)沒有重新渲染，參考這篇文章后：
得知了toggleRowSelection() 函數(shù)需要在頁面渲染完畢之后才有效，而每次換頁，數(shù)據(jù)都會進(jìn)行更新，要重新渲染頁面，所以需要放在this.$nextTick中
于是，代碼如下：
這樣，就能在換頁時，將原來在該頁勾選的數(shù)據(jù)重新選中了。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue中Axios封裝API接口的思路及方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了Vue3中實現(xiàn)過渡動畫的一些常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
vue中使用go()和back()兩種返回上一頁的區(qū)別說明
這篇文章主要介紹了vue中使用go()和back()兩種返回上一頁的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Props傳參v-for后TS報錯對象類型是unknow的解決方案
這篇文章主要介紹了Props傳參v-for后TS報錯對象類型是unknow的解決方案,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了Vue.js實現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了Vue入口文件index.html緩存的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了uni-app 的模板語法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)滑動和滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了VUE-PDF實現(xiàn)pdf在線預(yù)覽問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項
this.$set()和Vue.set()本質(zhì)方法一樣，前者可以用在methods中使用。這篇文章主要介紹了Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項,需要的朋友可以參考下2018-08-08