vue3 tab切换函数回调刷新跳转页面

需求背景

页面miTab引用了两个组件A和B, 以tab切换方式显示，在tab页面A提交表单保存成功后跳转到tab页面B，并且tab页面B自动刷新表格列表能显示刚才保存成功的数据

出现的问题

跳转成功了，但是列表没刷新，排查后发现是没有在跳转后调用 tab B 的数据获取函数

解决方案

在页面miTab调用tab B组件的 getData 方法，前提是用 B页面提供注入功能来让父组件能够访问子组件的方法。
主要还得是在父组件中把逻辑处理好

关键代码

  • miTab.vue
<template><div><el-tabs :model-value="activeName" @tab-click="handleClick"><el-tab-pane label="CAD-BOM" name="CAD-BOM"><CADBOMComponent @a-reuse-success="switchToaTab" /></el-tab-pane><el-tab-pane label="a" name="a" ><aComponent ref="aComponent"/></el-tab-pane></el-tabs></div>
</template><script>
import { ref } from 'vue';
import CADBOMComponent from './CADBOMComponent.vue'; // 导入 CAD-BOM 组件
import aComponent from './aComponent.vue'; // 导入 a 组件export default {name: 'part',components: {CADBOMComponent,aComponent},setup() {const activeName = ref('CAD-BOM');const aComponent = ref(null); // 用于引用 aComponent 实例const handleClick = (tab, event) => {activeName.value = tab.props.name;};const switchToaTab = () => {// 当收到子组件的 a-reuse-success 事件时，切换到 a tabactiveName.value = 'a';if (aComponent.value) {aComponent.value.getData(); // 直接调用 aComponent 的 getData 方法}};return {activeName,handleClick,switchToaTab,aComponent};}
};
</script>
  • aTab
    表格表单代码以及其他逻辑处理太多，此处省略一万字…

export default {name: 'aTab',setup(_,context) {}const emit = context.emit;const MBOMaddEdit = () => {const data = {partNo: MBOMForm.partNo,partRev: MBOMForm.partRev,name: MBOMForm.name,cName: MBOMForm.cName,material: MBOMForm.material,gauge: MBOMForm.gauge,massqty: MBOMForm.massqty,partType: MBOMForm.partType}addMBom(data).then(res => {if (res.code !== 500) {ElMessage.success('恭喜您，添加成功！')//通知父组件切换到 MBOM tabemit('mbom-reuse-success');} else {ElMessage.error(res.msg)}})}
  • bTab
<template><div class="part"><div class="common-query"><div class="common-query-demo"><span>零部件名称</span><el-input placeholder="请输入零部件名称" v-model="query.name"></el-input></div><div class="common-query-demo"><el-button icon="el-icon-search" @click="handleQuery">查询</el-button><el-button icon="el-icon-refresh" @click="resetQuery"style="margin-left: 20px !important;">重置</el-button></div></div><div class="line-body"><el-button type="primary" class="handle-btn" icon="el-icon-circle-plus-outline"@click="addEdit">新建</el-button><el-button type="primary" class="handle-btn" icon="el-icon-delete" @click="deleteBatch">批量删除</el-button><el-table :data="tableData" :max-height="tableHeight" @selection-change="handleSelectionChange" stripeborder><el-table-column type="selection" width="55" fixed></el-table-column><el-table-column type="index" label="序号" width="50"></el-table-column><el-table-column prop="name" label="名称" sortable min-width="100"></el-table-column><el-table-column prop="cName" label="中文名称" min-width="100"></el-table-column><el-table-column prop="partNo" label="数模号 " min-width="100"></el-table-column><el-table-column prop="partRev" label="版本号" min-width="100"></el-table-column><el-table-column prop="material" label="材料" min-width="100"></el-table-column><el-table-column prop="gauge" label="规格" min-width="100"></el-table-column><el-table-column prop="massqty" label="重量" min-width="100"></el-table-column><el-table-column prop="partType" label="数据类型" min-width="100"></el-table-column><el-table-column prop="status" label="状态" min-width="100"><template #default="scope">{{ scope.row.isLock == 0 ? '未锁定' : '已锁定' }}</template></el-table-column><el-table-column fixed="right" label="操作" width="400"><template #default="scope"><el-button type="primary" icon="el-icon-view" @click="showTree(scope.row)">树形结构</el-button><el-button type="primary" icon="el-icon-view" @click="MBOMMux(scope.row)">MBOM复用</el-button><!-- 下载 --><el-button type="primary" icon="el-icon-download" @click="download(scope.row)">下载文件</el-button><i class="el-icon-delete" @click="deletePart(scope.row)"></i></template></el-table-column></el-table><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="query.pageNum" :page-sizes="[10, 15, 20, 25, 30]" :page-size="query.pageSize"layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination><el-dialog :title="title" v-model="drawer" width="600px"><el-form :model="partForm" :rules="rules" ref="partFormsss" label-width="120px" class="demo-partForm"><el-form-item label="数模号：" prop="partNo"><el-input v-model="partForm.partNo" clearable></el-input></el-form-item><el-form-item label="版本号：" prop="partRev"><el-input v-model="partForm.partRev" clearable></el-input></el-form-item><el-form-item label="名称：" prop="name"><el-input v-model="partForm.name" clearable></el-input></el-form-item><el-form-item label="上级节点：" v-if="partForm.parentName"><el-input v-model="partForm.parentName" disabled></el-input></el-form-item><el-form-item label="中文名称：" prop="cName"><el-input v-model="partForm.cName" clearable></el-input></el-form-item><el-form-item label="材料：" prop="material"><el-input v-model="partForm.material" clearable></el-input></el-form-item><el-form-item label="规格：" prop="gauge"><el-input v-model="partForm.gauge" clearable></el-input></el-form-item><el-form-item label="重量：" prop="massqty"><el-input v-model="partForm.massqty" clearable></el-input></el-form-item><el-form-item label="数据类型：" prop="partType"><el-input v-model="partForm.partType" clearable></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="cancelEdit">取 消</el-button><el-button type="primary" @click="saveEdit">确 定</el-button></span></template></el-dialog></div></div>
</template><script>
import { reactive, ref, toRefs, unref, onMounted, nextTick, onUnmounted } from 'vue'
import { add, remove, listByPage, listAll, downloadFile } from '@api/pdm/part'
import { addMBom, getMBomDdata } from '@api/pdm/mbom'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios';export default {name: 'bTab',setup() {// 定义的变量const state = reactive({query: {pageNum: 1,pageSize: 10,name: ''},statusList: [],title: '',drawer: false,  // 新建对话框handleId: '',  // 编辑id// 表数据tableData: [],total: 0,selectList: [],multipleSelection: []})const router = useRouter()// 通过计算表格距离页面底部的距离来实现表格高自适应const tableHeight = ref(window.innerHeight - 342)const partForm = reactive({partNo: '',partRev: '',name: '',cName: '',material: '',gauge: '',massqty: '',partType: '',parentId: '',parentName: ''})const partFormsss = ref(null)const rules = {name: [{ required: true, message: "此处为必填项" }],partNo: [{ required: true, message: "此处为必填项" }],partRev: [{ required: true, message: "此处为必填项" }]}//零部件表格function getData() {getMBomDdata(state.query).then(res => {state.total = res.data.totalstate.tableData = res.data.list})}// 新建零部件const addEdit = () => {state.drawer = truepartForm.parentName = ''state.title = '添加零部件'partForm.parentId = ''partForm.partNo = ''partForm.partRev = ''partForm.name = ''partForm.cName = ''partForm.material = ''partForm.gauge = ''partForm.massqty = ''partForm.partType = ''}//展示零部件const showTree = (row) => {// state.title = '编辑零部件'// state.drawer = true// state.btnShow = true// state.handleId = row.id// partForm.partNo = row.partNo// partForm.partRev = row.partRev// partForm.name = row.name// partForm.cName = row.cName// partForm.material = row.cName// partForm.gauge = row.gauge// partForm.massqty = row.massqty// partForm.partType = row.partType// router.push({path: '/pdm/property?partId='+row.id})router.push({path: '/pdm/property',query: {id: row.id}})}//断点续传// const download = async (row) => {//     const fileName = '11.png'; // 文件名//     const chunkSize = 1024 * 1024; // 分块大小，例如1MB//     let startByte = localStorage.getItem(`${fileName}-downloaded`) || 0;//     const config = {//         responseType: 'blob',//         headers: {//             'Range': `bytes=${startByte}-${startByte + chunkSize - 1}`,//         },//     };//     try {//         const response = await axios.get('/mes/file/download', config);//         // 直接处理响应，不再依赖于状态码检查//         const url = window.URL.createObjectURL(new Blob([response]));//         const link = document.createElement('a');//         link.href = url;//         link.download = fileName;//         document.body.appendChild(link);//         link.click();//         document.body.removeChild(link);//         // 更新已下载的字节数//         startByte += chunkSize;//         if (startByte < response.size) {//             localStorage.setItem(`${fileName}-downloaded`, startByte);//         } else {//             localStorage.removeItem(`${fileName}-downloaded`);//         }//     } catch (error) {//         console.error('Download error:', error);//     }// };const download = async (row) => {try {const data = {id: row.id}downloadFile(data).then(response => {if (response.code && response.code == 500) {ElMessage.error(response.msg)} else {// 创建一个URL表示Blob对象// const url = window.URL.createObjectURL(new Blob([response]));const url = '/mes/pdm/cadDownloadPart?id=' + row.id;// let fileName = response.headers['Content-Disposition'].split('filename=')[1];// 创建隐藏的可下载链接const link = document.createElement('a');link.href = urllink.style.display = 'none';// 将链接添加到DOM中，然后模拟点击下载document.body.appendChild(link);link.click();// 清理工作，释放URL对象window.URL.revokeObjectURL(url);link.remove();}})} catch (error) {// console.error('下载失败:', error);// alert('文件不存在或下载过程中出现问题！');ElMessage.error('下载失败')}};// 新建/编辑零部件const saveEdit = async () => {const form = unref(partFormsss)if (!form) returntry {await form.validate()if (state.title == '添加零部件') {addSavePart()}if (state.title == '编辑零部件') {updateSavePart()}state.drawer = false} catch (error) {console.error(error)ElMessage.error('抱歉，您有必填项未填！')}}const addSavePart = () => {const data = {partNo: partForm.partNo,partRev: partForm.partRev,name: partForm.name,cName: partForm.cName,material: partForm.material,gauge: partForm.gauge,massqty: partForm.massqty,partType: partForm.partType,}add(data).then(res => {state.drawer = falseElMessage.success('恭喜您，添加成功！')getData()})}const updateSavePart = () => {const data = {id: state.handleId,partNo: partForm.partNo,partRev: partForm.partRev,name: partForm.name,cName: partForm.cName,material: partForm.material,gauge: partForm.gauge,massqty: partForm.massqty,partType: partForm.partType}update(data).then(res => {state.drawer = falsegetData()ElMessage.success('恭喜您，保存成功！')})}// 删除零部件const deletePart = (row) => {const ids = []ids.push(row.id)deleteProData(ids)}// 调用删除零部件接口const deleteProData = (data) => {remove(data).then(res => {getData(state.query)ElMessage.success('恭喜您，删除成功！')})}//批量删除零部件function deleteBatch() {const sels = state.multipleSelectionif (sels.length != 0) {// 获取所有选中行的id组成的字符串，以逗号分隔const strIds = sels.map((item) => item.id).join()// split() 方法用于把一个字符串分割成字符串数组。const ids = strIds.split(',')deleteProData(ids)// ElMessage.success('您刪除了' + ids + '!')} else {ElMessage.error('您当前未选中！')}}// 新建取消const cancelEdit = () => {state.drawer = falsesetTimeout(() => {const form = unref(partFormsss)form.resetFields()}, 100)}const statusFormat = (row) => {for (let i = 0; i < state.statusList.length; i++) {if (row == state.statusList[i].dictValue) {return state.statusList[i].dictLabel}}}// 批量删除选中function handleSelectionChange(val) {state.multipleSelection = val}function handleQuery() {queryEdit(state.query)}function resetQuery() {state.query.name = ''}// 查询function queryEdit(query) {getData(query)ElMessage.success('恭喜您，查询成功！')}// 分页页数function handleSizeChange(val) {state.query.pageSize = valqueryEdit(state.query)}function handleCurrentChange(val) {state.query.pageNum = valqueryEdit(state.query)}function getHeight() {tableHeight.value = window.innerHeight - 342}// 页面加载时调用函数onMounted(() => {// 注册监听器window.addEventListener('resize', getHeight)// 调用函数getHeight()getData()})onUnmounted(() => {// 注销监听器window.removeEventListener('resize', getHeight)})return {...toRefs(state),tableHeight,rules,partFormsss,partForm,cancelEdit,saveEdit,handleSelectionChange,handleQuery,resetQuery,handleSizeChange,handleCurrentChange,showTree,addEdit,deletePart,deleteBatch,statusFormat,download,getData}}
}
</script><style lang="scss">
.part {width: 100%;height: 100%;.line-body {height: calc(100% - 120px);margin-top: 20px;box-shadow: $box-shadow;background: #fff;padding: 20px;.handle-btn {min-height: 32px;height: 32px;padding: 0 10px;margin-right: 10px;}.el-table {margin-top: 20px;td:last-child {.cell {display: flex;justify-content: space-between;padding: 0 10px;}}.cell {padding: 0;.head-url {height: 36px;position: relative;.el-image {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;border-radius: 5px;}}.el-tag {height: 25px;line-height: 25px;padding: 0 7px;}}.el-icon-delete {cursor: pointer;color: #EB7A40;font-size: 22px;}.el-icon-delete:hover {opacity: 0.9;}}}
}
</style>

希望我的解决方案能帮助到遇到同样问题的同学，奥利给！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/48162.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux 注意事项

Linux 注意事项

Linux 与 Windows 是两个相互独立的操作系统&#xff0c;两者有较大差距&#xff1a; 1.1 Linux 严格区分大小写&#xff08;Windows不严格区分大小写&#xff09;&#xff1b; 1.2 Linux 中所有内容&#xff0c;硬件设备都以文件形式保存在 /dev 目录下&#xff08;万物皆文件…
阅读更多...
攻防世界 re新手模式

攻防世界 re新手模式

Reversing-x64Elf-100 64位ida打开 看if语句&#xff0c;根据i的不同&#xff0c;选择不同的数组&#xff0c;后面的2*i/3选择数组中的某一个元素&#xff0c;我们输入的是a1 直接逆向得到就行 二维字符数组写法&#xff1a;前一个是代表有几个字符串&#xff0c;后一个是每…
阅读更多...
Logback日志异步打印接入指南，输出自定义业务数据

Logback日志异步打印接入指南，输出自定义业务数据

背景 随着应用的请求量上升&#xff0c;日志输出量也会成线性比例的上升&#xff0c;给磁盘IO带来压力与性能瓶颈。应用也遇到了线程池满&#xff0c;是因为大量线程卡在输出日志。为了缓解日志同步打印&#xff0c;会采取异步打印日志。这样会引起日志中的追踪id丢失&#xf…
阅读更多...
鸿蒙OS开发工具 DevEco Studio(4.0)安装教程

鸿蒙OS开发工具 DevEco Studio(4.0)安装教程

1.旧版本下载地址【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总_deveco studio历史版本-CSDN博客 2.解压安装包&#xff0c;双击安装程序 3.打开后点击Next 4.点击“Browse...”选择路径&#xff0c;然后点击“Next” 5.勾选&#xff0c;点击“Next” 6.默认&#xff0c;直…
阅读更多...
NASA数据集——宝瓶座天体微波发射图辅助数据集 V1.0

NASA数据集——宝瓶座天体微波发射图辅助数据集 V1.0

Aquarius Celestial Sky Microwave Emission Map Ancillary Dataset V1.0 宝瓶座天体微波发射图辅助数据集 V1.0 简介 本数据集包含三张 L 波段&#xff08;波长 21 厘米&#xff09;天体&#xff08;"银河系"&#xff09;亮度温度图&#xff0c;用于处理美国航天…
阅读更多...
maven 私服搭建(tar+docker)

maven 私服搭建(tar+docker)

maven私服搭建 一、linux安装nexus1、工具下载 二、 docker 搭建nexus1、镜像下载创建目录2、运行nexus3、访问确认&#xff0c;修改默认密码&#xff0c;禁用匿名用户登录4、创建仓库5、创建hostd仓库6、创建Blob Stores7、创建docker私服1、创建proxy仓库2、创建hotsed本地仓…
阅读更多...
netcat 使用

netcat 使用

GPT-4o (OpenAI) Netcat (通常缩写为nc) 是一个功能强大的网络工具&#xff0c;可以方便地读写网络连接。它被广泛用于漏洞测试、网络调试和数据传输。Netcat 可以作为客户端&#xff0c;也可以作为服务器使用。 以下是一些常见的 Netcat 用法&#xff1a;基础用法 连接到服务…
阅读更多...
ISP代理和双ISP代理：区别和优势

ISP代理和双ISP代理：区别和优势

随着互联网技术的不断发展和普及&#xff0c;网络代理服务成为众多用户保护隐私、提高网络性能、增强安全性的重要工具。其中&#xff0c;ISP代理和双ISP代理是两种常见的网络代理服务形式。本文将详细探讨ISP代理和双ISP代理的区别和优势&#xff0c;以便用户更好地了解并选择…
阅读更多...
离散化

离散化

离散化 离散化适用于在一个较大区间内&#xff0c;只关心数据的相对大小&#xff0c;而不关心数据的绝对大小&#xff0c;通常将较大的区间通过映射缩小到一个较小区间中&#xff0c;用相对值代替绝对值&#xff0c;进行缩小区间范围的技巧&#xff0c;以提升时空效率。哈希表…
阅读更多...
C/C++ json库

C/C++ json库

文章目录 一、介绍1.1 json 介绍 二、C/C json 库选型2.1 选型范围2.2 jsoncpp2.2.2 jsoncpp 编译和交叉编译 2.3 rapidjson2.4 nlohmann/json2.5 sonic-cpp 五、常见问题5.1 jsoncpp 中关于浮点数的控制和中文显示问题5.2 jsoncpp序列化double类型时精度损失问题的解决办法 一…
阅读更多...
Rust编程-类面向对象编程

Rust编程-类面向对象编程

封装&#xff08;encapsulation&#xff09;&#xff1a; rust使用pub关键字来控制代码中哪些模块、类型、函数和方法是公开的&#xff0c;默认都是私有的 继承&#xff08;inheritance&#xff09;&#xff1a; rust里没有继承。 rust通过定义trait来实现代码共享。trait中也…
阅读更多...
算法学习笔记（Hello算法）—— 初识算法

算法学习笔记（Hello算法）—— 初识算法

1、相关链接 Hello算法&#xff1a;Hello 算法 (hello-algo.com) 2、算法是什么 2.1 算法定义 算法是一系列明确、有限且有效的步骤或指令的集合&#xff0c;用于解决特定问题或执行特定任务。 算法具有以下基本特征&#xff1a; 输入&#xff1a;算法至少有一个输入&…
阅读更多...
WPF中UI元素继承关系

WPF中UI元素继承关系

在 WPF&#xff08;Windows Presentation Foundation&#xff09;框架中&#xff0c;UI 元素是基于一个层次化的类结构构建的&#xff0c;这个结构以 FrameworkElement 类为核心&#xff0c;大多数 UI 元素都是 FrameworkElement 或其派生类的子类。FrameworkElement 类本身又继…
阅读更多...
libevent的event_config 配置相关接口

libevent的event_config 配置相关接口

目录 3. event_config 配置相关3.1 event_config_new功能备注原型 3.2 event_config_free功能备注原型 3.2 event_config_set_flag功能备注原型 3.4 event_config_set_num_cpus_hint功能备注原型 3.5 event_config_set_max_dispatch_interval功能备注原型 3.6 event_config_req…
阅读更多...
【JavaScript 算法】图的遍历：理解图的结构

【JavaScript 算法】图的遍历：理解图的结构

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、深度优先搜索&#xff08;DFS&#xff09;深度优先搜索的步骤深度优先搜索的JavaScript实现 二、广度优先搜索&#xff08;BFS&#xff09;广度优先搜索的步骤 三、应用场景四、总结 图的遍历是图论中的基本操作之一&am…
阅读更多...
院内影像一体化平台PACS源码，C#语言的PACS/RIS系统，二级医院应用案例

院内影像一体化平台PACS源码，C#语言的PACS/RIS系统，二级医院应用案例

全院级PACS系统源码&#xff0c;一体化应用系统整合&#xff0c;满足放射、超声、内窥镜中心、病理、检验等多个科室的工作流程和需求&#xff0c;为不同科室提供专业的解决方案&#xff0c;实现了全院乃至区域内信息互联互通、数据统一存储与管理等功能&#xff0c;做到以病人…
阅读更多...
浪漫情怀：红酒中的诗意与情感

浪漫情怀：红酒中的诗意与情感

在生活的点滴细节中&#xff0c;总有些元素能触动我们内心较柔软的地方&#xff0c;唤起那份深深的浪漫情怀。而红酒&#xff0c;便是这其中的一种神奇媒介。它以其不同的色泽、香气和口感&#xff0c;让人沉醉其中&#xff0c;感受那份诗意与情感的交织。今天&#xff0c;就让…
阅读更多...
C语言 | Leetcode C语言题解之第237题删除链表中的节点

C语言 | Leetcode C语言题解之第237题删除链表中的节点

题目&#xff1a; 题解&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/void deleteNode(struct ListNode* node) {struct ListNode * p node->next;int temp;temp node->val;node->val…
阅读更多...
Kotlin 协程简化回调

Kotlin 协程简化回调

suspend 和 suspendCoroutine 实现 suspendCoroutine函数必须在协程作用域或挂起函数中才能调用&#xff0c;它接收一个Lambda表达式参数&#xff0c;主要作用是将当前协程立即挂起&#xff0c;然后在一个普通的线程中执行Lambda表达式中的代码。Lambda表达式的参数列表上会传…
阅读更多...
常见排序算法总结

常见排序算法总结

文章目录 比较排序冒泡排序选择排序插入排序归并排序快速排序堆排序希尔排序 非比较排序&#xff08;桶排序&#xff09;计数排序基数排序 比较排序 冒泡排序 嵌套循环&#xff0c;每次内层循环执行时&#xff0c;数组的每两个元素交换&#xff0c;将一个最大/小的数排到数组…
阅读更多...
最新文章

Copyright @ 2022~2023