關(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ù)。
遇到的問(wèn)題
使用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)沒(méi)有重新渲染，參考這篇文章后：
得知了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中Axios封裝API接口的思路及方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue3中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了Vue3中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)的一些常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
vue中使用go()和back()兩種返回上一頁(yè)的區(qū)別說(shuō)明
這篇文章主要介紹了vue中使用go()和back()兩種返回上一頁(yè)的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案
這篇文章主要介紹了Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue.js實(shí)現(xiàn)可排序的表格組件功能示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動(dòng)態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
Vue入口文件index.html緩存的問(wèn)題及解決
這篇文章主要介紹了Vue入口文件index.html緩存的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了uni-app 的模板語(yǔ)法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
vue實(shí)現(xiàn)滑動(dòng)和滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)和滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問(wèn)題
這篇文章主要介紹了VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)
this.$set()和Vue.set()本質(zhì)方法一樣，前者可以用在methods中使用。這篇文章主要介紹了Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng),需要的朋友可以參考下2018-08-08