element plus 實現跨頁面+跨tab欄多選

文章目錄

    • element plus 層面
    • 數據層面

菜鳥好久沒寫博客了,主要是沒遇見什么很難的問題,今天碰見了一個沒有思路的問題,解決后立馬來和大家伙分享了!

菜鳥今天要實現一個需求,就是:實現跨頁面+跨 tab欄 多選!界面如下:

在這里插入圖片描述
菜鳥一開始感覺毫無頭緒,結果沒有去百度,直接問 chatGPT 了,chatGPT 直接整了一堆代碼,菜鳥試了,一點屁用沒有,然后只能百度,按照 csdn 的發現還是不行!

然后出去走了一圈,思來想去,把 chatGPT 的代碼注釋了一部分,就出效果了,果然還是人類總結的智慧更勝一籌!

這里菜鳥是四個 table 公用一個分頁,切換 tab欄 把分頁重置為1而已,實現跨頁面+跨 tab欄 多選的具體實現:

element plus 層面

其實 element plus 提供了數據變化不改變勾選狀態的東西,這里菜鳥記錄一下,也方便各位讀者:

vue

<!-- :row-key 必須加上 -->
<el-tableref="table1"stripe:data="tableData"style="width: 100%; height: 100%"@selection-change="handleSelectionChange":row-key="getRowKey"
><!-- :reserve-selection="true" 必須加,且要在 type="selection" 上 --><el-table-column fixed type="selection" width="55" :reserve-selection="true" />
</el-table>

js

// row-key
function getRowKey(row) {return row.id
}

數據層面

// 記錄每個tab選中的row
const selectedRows = [[], [], [], []]
// 選中的行
let multipleSelection = ref([]) // 用于批量刪除
const handleSelectionChange = (val) => {multipleSelection.value = val// taskaddpage是區分,因為該組件既是另一個界面又是另一個界面的彈窗;sampleType.value 代表的是tab的值if (props.taskaddpage) {selectedRows[sampleType.value] = valemit('sampleCheck', selectedRows.flat()) // 傳扁平化后的數據}
}

到這里,element plus 就實現完了跨頁面+跨 tab欄 多選!

可能看完真的不難,但是沒有思路的時候真的很難搞,只要有思路其實都挺簡單 !

菜鳥就是被chatGPT的代碼搞偏了,所以搞得賊復雜,這里可以把 chatGPT 的回答放這里,反正感覺挺影響思路的:

<template><el-tabs v-model="activeTab"><el-tab-pane label="Tab 1" name="1"><el-table:data="currentTableData"@selection-change="handleSelectionChange"ref="table1"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="name" label="Name" width="120"></el-table-column><el-table-column prop="age" label="Age" width="120"></el-table-column></el-table></el-tab-pane><el-tab-pane label="Tab 2" name="2"><el-table:data="currentTableData"@selection-change="handleSelectionChange"ref="table2"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="name" label="Name" width="120"></el-table-column><el-table-column prop="age" label="Age" width="120"></el-table-column></el-table></el-tab-pane><el-tab-pane label="Tab 3" name="3"><el-table:data="currentTableData"@selection-change="handleSelectionChange"ref="table3"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="name" label="Name" width="120"></el-table-column><el-table-column prop="age" label="Age" width="120"></el-table-column></el-table></el-tab-pane><el-tab-pane label="Tab 4" name="4"><el-table:data="currentTableData"@selection-change="handleSelectionChange"ref="table4"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="name" label="Name" width="120"></el-table-column><el-table-column prop="age" label="Age" width="120"></el-table-column></el-table></el-tab-pane></el-tabs><el-pagination@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize":total="total"layout="total, prev, pager, next"></el-pagination>
</template><script setup>
import { ref, watch, computed, nextTick } from 'vue';// 當前激活的標簽頁
const activeTab = ref('1');// 分頁信息
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(30);// 模擬的表格數據
const tableData = ref([{ name: 'John', age: 25 },{ name: 'Jane', age: 30 },{ name: 'Tom', age: 35 },{ name: 'Alice', age: 28 },{ name: 'Bob', age: 32 },{ name: 'Charlie', age: 29 },{ name: 'Dave', age: 45 },{ name: 'Eve', age: 38 },{ name: 'Frank', age: 50 },{ name: 'Grace', age: 26 },{ name: 'Heidi', age: 33 },{ name: 'Ivan', age: 27 },{ name: 'Judy', age: 40 },{ name: 'Mallory', age: 35 },{ name: 'Niaj', age: 42 },{ name: 'Oscar', age: 36 },{ name: 'Peggy', age: 39 },{ name: 'Rupert', age: 31 },{ name: 'Sybil', age: 34 },{ name: 'Trent', age: 43 },{ name: 'Victor', age: 44 },{ name: 'Wendy', age: 37 },{ name: 'Xander', age: 41 },{ name: 'Yvonne', age: 30 },{ name: 'Zach', age: 29 },
]);// 選中的行
const selectedRows = ref({'1': [],'2': [],'3': [],'4': [],
});// 標志位,避免在分頁和標簽頁切換時觸發 @selection-change
let isRestoringSelection = false;// 計算當前頁顯示的數據
const currentTableData = computed(() => {const start = (currentPage.value - 1) * pageSize.value;const end = start + pageSize.value;return tableData.value.slice(start, end);
});// 處理表格行選中變化
const handleSelectionChange = (selection) => {if (!isRestoringSelection) {selectedRows.value[activeTab.value] = selection;}
};// 處理分頁變化
const handleCurrentChange = (page) => {currentPage.value = page;restoreSelection();
};// 監聽分頁變化
watch(currentPage, () => {loading.value = true;setTimeout(() => {loading.value = false;restoreSelection();}, 500); // 模擬數據加載延遲
});// 恢復表格的選中項
const restoreSelection = () => {nextTick(() => {const tableRef = activeTab.value === '1' ? table1: activeTab.value === '2' ? table2: activeTab.value === '3' ? table3: table4;isRestoringSelection = true;tableRef.value.clearSelection();selectedRows.value[activeTab.value].forEach(row => {tableRef.value.toggleRowSelection(row, true);});isRestoringSelection = false;});
};// 監聽標簽頁切換
watch(activeTab, () => {restoreSelection();
});const table1 = ref(null);
const table2 = ref(null);
const table3 = ref(null);
const table4 = ref(null);
</script><style>
/* 樣式根據需要調整 */
</style>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/43919.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/43919.shtml
英文地址,請注明出處:http://en.pswp.cn/web/43919.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

力學篤行(四)Qt 線程與信號槽

線程與信號槽 1. 主窗口&#xff08;MainWindow&#xff09;主線程2. 線程2.1 QThread2.2 QtConcurrent::run()2.3 thread 的調用方式 3. 信號槽3.1 connect3.2 元對象系統中注冊自定義數據類型 附錄一 信號槽機制與主線程進行通信示例 1. 主窗口&#xff08;MainWindow&#x…

MySQL聯合索引最左匹配原則

MySQL中的聯合索引(也叫組合索引)遵循最左匹配原則&#xff0c;即在創建聯合索引時&#xff0c;查詢條件必須從索引的最左邊開始&#xff0c;否則索引不會被使用。在聯合索引的情況下&#xff0c;數據是按照索引第一列排序&#xff0c;第一列數據相同時才會按照第二列排序。 例…

CVE-2024-27292:Docassemble任意文件讀取漏洞復現 [附POC]

文章目錄 CVE-2024-27292&#xff1a;Docassemble任意文件讀取漏洞復現 [附POC]0x01 前言0x02 漏洞描述0x03 影響版本0x04 漏洞環境0x05 漏洞復現1.訪問漏洞環境2.構造POC3.復現 0x06 修復建議 CVE-2024-27292&#xff1a;Docassemble任意文件讀取漏洞復現 [附POC] 0x01 前言 …

冒泡排序與其C語言通用連續類型排序代碼

冒泡排序與其C語言通用連續類型排序代碼 冒泡排序冒泡排序為交換排序的一種&#xff1a;動圖展示&#xff1a;冒泡排序的特性總結&#xff1a;冒泡排序排整型數據參考代碼&#xff08;VS2022C語言環境&#xff09;&#xff1a; 冒泡排序C語言通用連續類型排序代碼對比較的方式更…

法律行業守護神:知識庫+AI大模型,解鎖企業知識全周期管理

在法律行業中&#xff0c;搭建一個有效的知識庫并進行企業知識全生命周期管理確實是一項不小的挑戰。法律環境的復雜性和不斷變化的法規要求企業必須持續更新和維護其知識庫&#xff0c;以確保所有信息的準確性和實時性。 這種系統化的信息管理不僅有助于提高律師和法律顧問的…

打卡第9天-----字符串

我在自學的時候,看了卡爾的算法公開課了,有些題目我就照葫蘆畫瓢寫了一遍js代碼,差不多都寫出來了,有暴力解法,有卡爾推薦的思路和方法。話不多說,直接上題上代碼吧: 一、翻轉字符串里的單詞 leetcode題目鏈接:151. 反轉字符串中的單詞 題目描述: 給你一個字符串 s…

5個自動化面試題,助你過關斬將!

面試時&#xff0c;自動化是軟件測試高頻面試內容&#xff0c;通過學習和準備面試題&#xff0c;你會對可能遇到的問題有所準備&#xff0c;從而減輕面試時的緊張感&#xff0c;讓你在面試中穩操勝券&#xff01; 今天&#xff0c;分享一些在面試中可能會遇到的自動化測試面試…

軟件架構之測評方法

軟件架構之測評方法 第 11 章&#xff1a;測試評審方法11.1 測試方法11.1.1 軟件測試階段11.1.2 白盒測試和黑盒測試11.1.3 缺陷的分類和級別11.1.4 調試 11.2 評審方法11.3 驗證與確認11.4 測試自動化11.5 面向對象的測試 第 11 章&#xff1a;測試評審方法 軟件測試與評審是…

大學生暑假“三下鄉”社會實踐工作新聞投稿指南請查收!

近年來&#xff0c;大學生暑期“三下鄉”社會實踐工作方興未艾&#xff0c;越來越多的大學生通過參與“三下鄉”實踐工作&#xff0c;走出校園&#xff0c;深入基層&#xff0c;體驗農村生活&#xff0c;服務農民&#xff0c;促進農村經濟社會發展&#xff0c;實現了理論與實踐…

算能科技,致力于成為全球領先的通用算力供應商

算能致力于成為全球領先的定制算力提供商&#xff0c;專注于RISC-V、TPU處理器等算力產品的研發和推廣應用。公司遵循全面開源開放的生態理念&#xff0c;攜手行業伙伴推動RISC-V高性能通用計算產業落地&#xff1b;打造覆蓋“云、邊、端”的全場景產品矩陣&#xff0c;為數據中…

【eNSP模擬實驗】三層交換機實現VLAN通信

實驗需求 讓PC1和PC2能夠互相通訊&#xff0c;其中PC1在vlan10中&#xff0c;PC2在vlan20中。 實驗操作 首先把PC1和PC2都配置好ip&#xff0c;配置好之后&#xff0c;點擊右下角的應用 然后&#xff0c;在S2交換機&#xff08;S3700&#xff09;上做如下配置 #進入系統 <…

mvvm模式

MVVM&#xff08;Model-View-ViewModel&#xff09;模式是一種軟件設計模式&#xff0c;特別適用于構建用戶界面&#xff08;UI&#xff09;應用程序&#xff0c;尤其是使用WPF&#xff08;Windows Presentation Foundation&#xff09;、Silverlight和其他XAML技術的應用程序。…

【Redis】Redis十大類型

文章目錄 前言一、string字符串類型二、List列表類型三、 Hash表四、 Set集合五、 ZSet有序集合六、 GEO地理空間七、 HyperLogLog基數統計八、Bitmap位圖九、bitfield位域十、 Stream流10.1 隊列指令10.2 消費組指令10.3 ACK機制 前言 redis是k-v鍵值對進行存儲&#xff0c;k…

Mac上pyenv的安裝及使用

Mac上pyenv的安裝及使用 安裝 brew update brew install pyenv 報錯 git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallowgit -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow那就執行這2句 還報錯 git -C /…

【最經典的79個】軟件測試面試題(內含答案)提前備戰“金九銀十”

001.軟件的生命周期(prdctrm) 計劃階段(planning)-〉需求分析(requirement)-〉設計階段(design)-〉編碼(coding)->測試(testing)->運行與維護(running maintrnacne) 測試用例 用例編號 測試項目 測試標題 重要級別 預置條件 輸入數據 執行步驟 預期結果 0002.問&…

“論軟件維護方法及其應用”寫作框架,軟考高級論文,系統架構設計師論文

論文真題 軟件維護是指在軟件交付使用后&#xff0c;直至軟件被淘汰的整個時間范圍內&#xff0c;為了改正錯誤或滿足 新的需求而修改軟件的活動。在軟件系統運行過程中&#xff0c;軟件需要維護的原因是多種多樣的&#xff0c; 根據維護的原因不同&#xff0c;可以將軟件維護…

CVE-2024-34351 漏洞復現

CVE-2024-34351&#xff0c;由Next.js異步函數createRedirectRenderResult導致的SSRF。 影響版本&#xff1a;13.4.0< Next.js < 14.1.1 參考文章&#xff1a; Next.js Server-Side Request Forgery in Server Actions CVE-2024-34351 GitHub Advisory Database Gi…

數據庫Doris的手動分桶和自動分桶

在Doris中,分桶(Bucketing)是為了更好地管理和查詢數據,將數據分成多個小的邏輯單元。分桶可以通過手動或自動的方式進行配置,每種方式各有其特點和適用場景。 Doris 支持兩層的數據劃分。第一層是分區(Partition),支持 Range 和 List 的劃分方式。第二層是Bucket(Tab…

RK3568平臺開發系列講解(內存篇)Linux進程內存的消耗統計

??返回專欄總目錄 文章目錄 一、VSS(Virtual Set Size)二、RSS(Resident Set Size)三、PSS(Proportional Set Size)四、USS(Unique Set Size)五、其他工具Linux 提供了多種進程內存占用的度量指標, 它們反映了不同的內存使用特征: VSS 反映進程虛擬內存總需求, 包括未…

2.python條件語句與循環

1.概述 通過條件語句來判斷&#xff0c;條件成立執行某些代碼&#xff0c;條件不成立則不執行這些代碼 2.if語句 if條件&#xff1a;條件成立執行的代碼...... 下方代碼沒有縮進到if語句塊&#xff0c;所以和if條件無關if…else if條件&#xff1a;條件成立執行的代碼.....…