当前位置：首页 > news >正文

tabs页签嵌套表格，切换表格保存数据不变并回勾

news 来源：原创 2025/6/13 7:35:41

需求：点击左边的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)
}