tabs頁簽嵌套表格，切換表格保存數據不變并回勾

需求：點擊左邊的tab頁簽，請求右側表格數據；如果返回的接口數據存在taskuser字段并不為null，那么按照這個字段去回勾數據。如果存在數據，但與后面所勾選的數據項不同，按照后面勾選的為主。

    <el-tabs tab-position="left" v-model="dialogInfo.activeTab" style="height: 350px" class="demo-tabs" @tab-change="tabChange"><el-tab-pane v-for="tab in dialogInfo.tabs" :key="tab.id" :label="tab.text" :name="tab.text"><div class="tableDiv"><el-tableref="refTableV":data="tableConfig.tableData":header-cell-style="{ background: '#F5F7FA', height: '30px' }"style="width: 100%; margin: 0 auto"height="100%"align="center"row-key="empName"stripeborder@select="select"><el-table-column type="selection" width="40" fixed label="操作" /><el-table-column fixed prop="userName" label="用戶編號" width="120" align="center" /><el-table-column fixed prop="empName" label="用戶姓名" min-width="150" align="center" /><el-table-column fixed prop="expiresdate" label="過期日期" min-width="150" align="center"><template v-slot="scope"><el-date-pickerv-if="dialogInfo.tabs[dialogInfo.activeTabIndex].allot?.empName === scope.row.empName"v-model="scope.row.expiresdate"type="date"placeholder="選擇日期"size="small"@change="handleDateChange(scope.row)"value-format="YYYY-MM-DD"/><span v-else @click="changeLeader(scope.row)">{{ scope.row.expiresdate || '' }}</span></template></el-table-column><el-table-column fixed prop="leaderNames" label="直接領導" min-width="150" align="center"><template v-slot="scope"><span v-if="scope.row.leaderNames && scope.row.leaderNames !== ''" size="small" @click="leaderSearch(scope.row)">{{ scope.row.leaderNames || '選擇領導' }}</span><span v-else-if="dialogInfo.tabs[dialogInfo.activeTabIndex].allot?.empName === scope.row.empName"><el-button size="small" @click="leaderSearch(scope.row)">{{ '選擇領導' }}</el-button></span></template></el-table-column></el-table></div></el-tab-pane></el-tabs>
const refTableV = ref(null) //表格
const refTree = ref(null)
const dialogInfo = reactive({tabs: [],dialogText: '任務分配',dialogFormVisible: false,activeTab: '',searchstrId: '',list: [],treeLearder: {},str: []
})const tableConfig = reactive({allot: {},tableData: [],loading: false,page: 1,selectedData: [], // 存儲當前勾選的數據項lastSelectedRow: {},paramsData: {},activeTabIndex: 0
})

?首先openInit 這個方法是我打開彈層的第一步，tabs數據是左側的角色信息；我會給每一項的tab數據添加selectedData和allot 這個在后面取值會用到。

const openInit = (list) => {dialogInfo.str = []list.forEach((item) => dialogInfo.str.push(item.factory + ',' + item.materialscode))tableConfig.selectedData = [] // 存儲當前勾選的數據項tableConfig.lastSelectedRow = {}tableConfig.allot = {}dialogInfo.list = JSON.parse(JSON.stringify(list))dialogInfo.treeLearder = {}getPropertyList({searchstr: {taskType: 'SPAREPARTSTASKROLE'}}).then((res) => {const tabs = res.data.rows || []dialogInfo.searchstrId = ''if (tabs.length > 0) {dialogInfo.searchstrId = tabs[0].iddialogInfo.activeTab = tabs[0].texttabs.forEach((row) => {row.selectedData = []row.allot = {}})dialogInfo.tabs = tabsdialogInfo.activeTabIndex = 0dialogInfo.dialogFormVisible = truegetTable() // 獲取表格數據}})
}const getTable = () => {preTaskAssign({searchstr: {id: dialogInfo.searchstrId,eventcodes: dialogInfo.str.join(';')}}).then((res) => {const tableData = res.data.row?.teapSysUserEntityList || []const taskuser = res.data.row?.taskuser || ''refTableV.value[dialogInfo.activeTabIndex].clearSelection()const strLength = dialogInfo.str.lengthif (strLength === 1) {if (tableData && tableData.length > 0) {tableData.forEach((newRow) => {if (newRow.userName === taskuser) {dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData = [newRow]dialogInfo.tabs[dialogInfo.activeTabIndex].allot = newRownextTick(() => {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(newRow, true)})}})}}tableConfig.tableData = tableData})
}

代碼主要就是針對勾選數據 保存數據，切換tab頁簽 再次回來后數據的勾選處理?

const select = (selectedRows) => {// 獲取當前 tab 的數據const currentTab = dialogInfo.tabs[dialogInfo.activeTabIndex]refTableV.value[dialogInfo.activeTabIndex].clearSelection()// 清空上一次選中的數據currentTab.selectedData = []currentTab.allot = {}// 更新當前 tab 的 selectedData 和 allotif (selectedRows.length === 1) {currentTab.selectedData = selectedRowscurrentTab.allot = selectedRows[0] // 如果有 allot 數據，更新為第一個選中的數據nextTick(() => {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(currentTab.allot, true)})} else {ElMessage.warning('只能選擇一條數據,請取消已勾選項后再進行選擇')}// 更新當前 tab 的 selectedData 和 allotdialogInfo.tabs[dialogInfo.activeTabIndex] = currentTab
}// 選擇領導的彈層
const tabChange = (name) => {// 查找當前 tab 索引dialogInfo.activeTab = namedialogInfo.searchstrId = dialogInfo.tabs.find((item) => item.text === name).idlet index = nulldialogInfo.tabs.some((item, ind) => {if (item.text === name) {index = indreturn true // 找到就停止遍歷}return false})dialogInfo.activeTabIndex = indexconst currentTab = dialogInfo.tabs[index]// 保存當前勾選狀態const { selectedData, allot } = currentTab// 在切換 tab 時，將勾選狀態存儲到 dialogInfo 中dialogInfo.tabs[index].selectedData = selectedData || []dialogInfo.tabs[index].allot = allot || {}// 重新加載當前 tab 的數據，保持選中狀態preTaskAssign({searchstr: {id: dialogInfo.searchstrId,eventcodes: dialogInfo.str.join(';') // 外面行勾選的數據 工廠加物料編號傳字符串}}).then((res) => {// 獲取從接口返回的表格數據const tableDataList = res.data.row?.teapSysUserEntityList || []const taskuser = res.data.row?.taskuser || ''// 更新表格數據tableConfig.tableData = tableDataListrefTableV.value[dialogInfo.activeTabIndex].clearSelection()// 使用一些邏輯優化遍歷，找到合適的行就停止let isFound = falsetableDataList.forEach((row) => {if (isFound) return // 如果已經找到匹配項，直接跳過后續行const selectedUserName = selectedData[0]?.userNameif (taskuser) {if (selectedData.length === 0) {// 1. 如果有taskuser但是selectedData為空，依照taskuser去篩選數據if (row.userName === taskuser) {dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData = [row]dialogInfo.tabs[dialogInfo.activeTabIndex].allot = rownextTick(() => {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(row, true)})isFound = true // 標記為已找到匹配項，跳出循環}} else if (selectedUserName !== taskuser) {// 2. 如果同時存在，但是匹配不上，那么按照selectedData中的數據去篩選if (row.userName === selectedUserName) {dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData = [row]dialogInfo.tabs[dialogInfo.activeTabIndex].allot = rownextTick(() => {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(row, true)})isFound = true // 標記為已找到匹配項，跳出循環}} else if (selectedUserName === taskuser) {// 3. 如果同時存在，匹配的上，按照taskuser判斷nextTick(() => {const selectedRow = dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData[0]refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(selectedRow, true)})isFound = true // 標記為已找到匹配項，跳出循環}} else {// 4. taskuser不存在，按照selectedData去篩選if (row.userName === selectedUserName) {dialogInfo.tabs[dialogInfo.activeTabIndex].selectedData = [row]dialogInfo.tabs[dialogInfo.activeTabIndex].allot = rownextTick(() => {refTableV.value[dialogInfo.activeTabIndex].toggleRowSelection(row, true)})isFound = true // 標記為已找到匹配項，跳出循環}}})})
}const leaderSearch = (row) => {// 查找與勾選行對應的數據const exObj = tableConfig.tableData.find((item) => item.userId === dialogInfo.tabs[dialogInfo.activeTabIndex].allot.userId)// 檢查過期日期是否為空if (exObj.expiresdate === '' || exObj.expiresdate == null) return ElMessage.warning('請先設置時間')const str = dialogInfo.tabs[dialogInfo.activeTabIndex].id // 這個就是左邊角色的idrefTree.value.openInit(JSON.parse(JSON.stringify(row)), str)
}

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

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

相關文章

Java Kafka消費者

Java Kafka消費者

基礎 Java Kafka消費者主要通過以下核心類實現&#xff1a; KafkaConsumer&#xff1a;消費者的核心類&#xff0c;用于創建消費者對象進行數據消費1ConsumerConfig&#xff1a;獲取各種配置參數&#xff0c;如果不配置就使用默認值1ConsumerRecord&#xff1a;每條數據都要封…
閱讀更多...
Git操作問題及解決方案-記錄5

Git操作問題及解決方案-記錄5

Git操作問題及解決方案 問題一&#xff1a;本地更改與遠程更新沖突 問題描述 當本地文件有未提交的更改&#xff0c;同時遠程倉庫也有更新時&#xff0c;執行git pull會導致沖突。 $ git pull origin main error: Your local changes to the following files would be overw…
閱讀更多...
一[3]、ubuntu18.04環境 利用 yolov8 訓練開源列車數據集，并實現列車軌道檢測

一[3]、ubuntu18.04環境 利用 yolov8 訓練開源列車數據集，并實現列車軌道檢測

一、開源車載數據集地址 (7 封私信) 軌道交通數據集-OSDaR23: Open Sensor Data for Rail 2023 - 知乎 二、參考資料 https://zhuanlan.zhihu.com/p/692608487 YOLOv8訓練自己的數據集-CSDN博客 https://download.csdn.net/blog/column/12710137/140991739
閱讀更多...
C語言數據結構筆記5：Keil 編譯器優化行為_malloc指針內存分配問題

C語言數據結構筆記5：Keil 編譯器優化行為_malloc指針內存分配問題

記錄倆個keil5 STM32 的c語言編程中 &#xff0c;編譯器優化行為 和 指針內存分配問題。 目錄 關閉Keil 編譯器優化行為&#xff1a; malloc指針內存分配問題 多層嵌套的結構體&#xff1a; 用指針取值&#xff1a; 發現問題&#xff1a; 解決問題&#xff1a; 示例代碼 關閉Ke…
閱讀更多...
每日八股文6.12

每日八股文6.12

每日八股-6.12 計算機網絡1.當我們在瀏覽器中輸入一個 URL 并按下回車后&#xff0c;到頁面最終顯示出來&#xff0c;這中間都發生了哪些關鍵步驟&#xff1f;2.請簡述一下 JWT&#xff08;JSON Web Tokens&#xff09;的原理和校驗機制3.DNS 是如何進行域名解析的&#xff1f;…
閱讀更多...
什么是云計算的邊緣原生應用？

什么是云計算的邊緣原生應用？

關于作者&#xff1a;John Bradshaw阿卡邁公司歐洲、中東和非洲地區云計算技術與戰略總監 當談及云計算時&#xff0c;人們往往會聯想到那些坐落于國際大都會核心地帶的大型數據中心集群&#xff0c;這些設施作為數字時代的重要樞紐&#xff0c;承載著海量數據處理任務。盡管這…
閱讀更多...
Linux常用命令速查與面試高頻命令總結

Linux常用命令速查與面試高頻命令總結

&#x1f427; Linux常用命令速查與面試高頻命令總結 本文旨在幫助初學者快速掌握 Linux 的常用命令&#xff0c;同時為即將參加技術面試的朋友們提供一份高頻命令清單和實用技巧。 &#x1f530; 一、基礎命令&#xff1a;熟練使用命令行從這里開始 這些是你在 Linux 中最常用…
閱讀更多...
基礎測試工具使用經驗

基礎測試工具使用經驗

背景 vtune&#xff0c;perf, nsight system等基礎測試工具&#xff0c;都是用過的&#xff0c;但是沒有記錄&#xff0c;都逐漸忘了。所以寫這篇博客總結記錄一下&#xff0c;只要以后發現新的用法&#xff0c;就記得來編輯補充一下 perf 比較基礎的用法&#xff1a; 先改這…
閱讀更多...
淺談DaemonSet

淺談DaemonSet

1. DaemonSet 概述 ?定義?&#xff1a;DaemonSet 確保 Kubernetes 集群的每個節點上運行一個 Pod 實例。?特性?&#xff1a; 每個節點上只有一個 Pod 實例。新節點加入集群時&#xff0c;會自動在新節點上創建 Pod。舊節點被刪除時&#xff0c;其上的 Pod 會被回收。 2.…
閱讀更多...
計算機系統（6）

計算機系統（6）

◆指令尋址方式&#xff1a; 順序尋址方式&#xff1a;執行一段程序時&#xff0c;是一條指令接著一條指令的順序執行。 跳躍尋址方式:下一條指令的地址碼不是由程序計數器給出&#xff0c;而是由本條指令直接給出。程序跳躍后&#xff0c;按新的指令地址開始順序執行。因此&…
閱讀更多...
基于服務器使用 apt 安裝、配置 Nginx

基于服務器使用 apt 安裝、配置 Nginx

&#x1f9fe; 一、查看可安裝的 Nginx 版本 首先&#xff0c;你可以運行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core輸出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…
閱讀更多...
python打卡訓練營打卡記錄day51

python打卡訓練營打卡記錄day51

復習日 作業&#xff1a;day43的時候我們安排大家對自己找的數據集用簡單cnn訓練&#xff0c;現在可以嘗試下借助這幾天的知識來實現精度的進一步提高 數據預處理 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transfor…
閱讀更多...
網絡安全：OWASP防護守則

網絡安全：OWASP防護守則

目錄 一、OWASP十大WEB弱點防護守則 二、防護守則 1、權限控制失效 2、加密失誤 3、注入 4、不安全設計 5、安全配置缺陷 6、易受攻擊和過時的組件 7、身份認證和會話管理失效 8、缺乏完整性校驗 9、缺乏監控與日志記錄 10、服務端請求偽造 三、核心防護原則總結 …
閱讀更多...
Dagster 實現數據質量自動化：6大維度檢查與最佳實踐

Dagster 實現數據質量自動化：6大維度檢查與最佳實踐

在當今數據驅動的世界中&#xff0c;數據質量的重要性不言而喻。數據質量測試是確保數據準確、完整、一致和可靠的關鍵步驟。本文將深入探討數據質量測試的六大維度&#xff0c;并提供相關的檢查方法和最佳實踐。 什么是數據質量測試&#xff1f; 數據質量測試涉及評估數據以確…
閱讀更多...
計算機視覺之三維重建（深入淺出SfM與SLAM核心算法）—— 2. 攝像機標定

計算機視覺之三維重建（深入淺出SfM與SLAM核心算法）—— 2. 攝像機標定

文章目錄 1. 前置知識1.1. 非齊次線性方程組求解1.1.1. 傳統求解方法1.1.2. 奇異值分解法1.1.3. 牛頓法或者梯度下降法 1.2. 齊次線性方程組的最小二乘解1.3. 非線性方程組的最小二乘解 2. 相機標定2.1. 相機內參數求解2.1.1. 求解 u 0 u_0 u0? 和 v 0 v_0 v0?2.1.2. 求解 …
閱讀更多...
SQLLL

SQLLL

595-big-countries https://leetcode.com/problems/big-countries/description/ 面積最大的國家 -- select name, population, area from World where area > 3000000 or population > 25000000596-classes-with-at-least-5-students https://leetcode.com/problems/…
閱讀更多...
MySQL中觸發器詳解 觸發器在自動化任務中的應用場景

MySQL中觸發器詳解 觸發器在自動化任務中的應用場景

觸發器是mysql中與表關聯的數據庫對象&#xff0c;能在特定操作&#xff08;如insert、update、delete&#xff09;發生時自動執行預定義sql邏輯。其核心用途包括&#xff1a;1. 維護數據一致性&#xff0c;如訂單插入后自動減少庫存&#xff1b;2. 記錄審計日志&#xff0c;如…
閱讀更多...
MySQL 8.0的數據庫root用戶默認無法遠程登錄，需要修改root的遠程授權

MySQL 8.0的數據庫root用戶默認無法遠程登錄，需要修改root的遠程授權

mysql> grant all privileges on . to ‘root’‘%’; ERROR 1410 (42000): You are not allowed to create a user with GRANT mysql> use mysql; Reading table information for completion of table and column names You can turn off this feature to get a quick…
閱讀更多...
??MPI + OpenMP 環境配置指南（Windows/Linux）?

??MPI + OpenMP 環境配置指南（Windows/Linux）?

—— 讓你的并行計算飛起來 &#x1f680; 1. 簡介?? ??MPI (Message Passing Interface)??&#xff1a;用于多機分布式并行計算&#xff08;進程級并行&#xff09;。??OpenMP??&#xff1a;用于單機多線程并行計算&#xff08;線程級并行&#xff09;。??混合編…
閱讀更多...
新聞類鴻蒙應用功耗危機以及優化方案

新聞類鴻蒙應用功耗危機以及優化方案

&#x1f50b; ??一、功耗痛點&#xff1a;新聞類應用成“續航殺手”?? ??后臺進程失控?? ??高頻刷新??&#xff1a;未適配應用&#xff08;如網易新聞、百度客戶端&#xff09;默認每30秒后臺刷新內容&#xff0c;觸發CPU持續喚醒&#xff0c;單設備日均耗電增加1…
閱讀更多...
最新文章

Copyright @ 2022~2023