文章目錄
- 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>