vue3?Table分頁保留選中狀態(tài)代碼示例
更新時(shí)間：2023年08月31日 10:52:00 作者：云霧散盡了
這篇文章主要給大家介紹了關(guān)于vue3?Table分頁保留選中狀態(tài)的相關(guān)資料,vue table組件是一個(gè)非常方便的表格組件,它可以幫助我們實(shí)現(xiàn)分頁和選中功能,需要的朋友可以參考下
//指定id值,數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)
const getRowKeys = (row) => {
return row.siteId;
};// 這存的是選中的數(shù)據(jù)
const userSelectionChange = (values) => {
state.selectedData = [...values];
};// 兩個(gè)數(shù)組對(duì)比，判斷表格中的數(shù)據(jù)是否開啟選中
const reserveSelection = () => {
let table = state.tableData;
table.forEach((item) => {
state.selectedData.forEach((ite) => {
if (item.siteId === ite.siteId) {
setTimeout(() => {
//讓頁面顯示選中的數(shù)據(jù)
multipleTable.value.toggleRowSelection(item, true);
}, 0);
}
});
});
};總結(jié)
到此這篇關(guān)于vue3 Table分頁保留選中狀態(tài)的文章就介紹到這了,更多相關(guān)vue3 Table分頁保留選中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中的shallowRef?和shallowReactive對(duì)比分析
這篇文章主要介紹了Vue3中的shallowRef?和shallowReactive,通過示例代碼逐一對(duì)他們的使用做的詳細(xì)介紹，文末補(bǔ)充介紹了vue3的shallowRef()、shallowReactive()和shallowReadonly()的使用，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue對(duì)象的基本組成和Vue對(duì)象掛載的幾種方式,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
完美解決vue 項(xiàng)目開發(fā)越久 node_modules包越大的問題
這篇文章主要介紹了vue 項(xiàng)目開發(fā)越久 node_modules包越大的問題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue組件的層級(jí)關(guān)系，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫詳細(xì)步驟(超詳細(xì))
Electron是一個(gè)基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router.push()
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router.push()，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決
這篇文章主要介紹了vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
elementUI?el-table二次封裝的詳細(xì)實(shí)例
在項(xiàng)目中會(huì)多次使用表格展示數(shù)據(jù),不對(duì)這個(gè)table進(jìn)行二次封裝成我們自己想要的,重復(fù)的代碼量的工作會(huì)比較大,下面這篇文章主要給大家介紹了關(guān)于elementUI?el-table二次封裝的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue使用路由技術(shù)實(shí)現(xiàn)登錄成功后跳轉(zhuǎn)到首頁
本文主要介紹了vue使用路由技術(shù)實(shí)現(xiàn)登錄成功后跳轉(zhuǎn)到首頁,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-05-05
vue實(shí)現(xiàn)全屏滾動(dòng)效果（非fullpage.js）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全屏滾動(dòng)效果，非fullpage.js，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03