el-tab-pane的自定义组件关闭时，重复调用已开启组件内的接口

最新推荐文章于 2024-05-27 09:30:11 发布
最新推荐文章于 2024-05-27 09:30:11 发布
阅读量1k 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x7993761/article/details/118786532
版权

el-tab-pane的自定义组件关闭时，重复调用已开启组件内的接口

我的项目需求是做一个日志填报的el-tabs页面。可以有很多的el-tab-pane页面，就是说可以同时填报很多日志。当我打开了三个el-tab-pane页面时，我关闭第一个。我发现第二个和第三个页面内的接口都重调了一边，相当于DOM会销毁然后重新生成一边，页面内的生命周期函数都会走一遍。我关闭第三个，就不会重新调用。我想可能是el-tabs封装的组件自己的diff算法来渲染的el-tab-pane。所以我关闭最后一个，组件页面不会重新渲染。接下来附上代码解决这个问题：

html页面因为我是用的动态组件，所以是:is，用:name来绑定显示的组件名称

你可以创建一个自己的List，用来保存你所有打开的页面。然后用watch监听这个List，当新增了页面，你就把新增的页面push到keep-alive的includeArr中。相当于这个includeArr和你所打开的List数组要保持一致。这样就可以达到缓存已经打开的组件的目的。

大概思路就是用keep-alive的includeArr来保存你已经打开的页面。当你关闭一个页面时，你可以把这个页面从includeArr中剔除。你所打开的页面的List数组要和includeArr保持一致。这样就解决这个问题了

x7993761
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
若依框架关闭tab刷新另一个tab
huangbaokang的博客
05-26 9580
// 选择执法人 function choose(){ var rows = $.table.selectFirstColumns(); if (rows.length == 0) { $.modal.alertWarning("请至少选择一条记录"); return; } if (rows.length > 1) { $.modal.alertWarning
vue的element中的el-tabs中使用FullCalendar加载异常的问题，延迟渲染el-tab-pane标签
丑小鸭变黑天鹅的博客
09-24 1761
vue的element中的el-tabs中使用FullCalendar加载异常的问题，延迟渲染el-tab-pane标签一、问题描述二、分析原因三、解决问题 一、问题描述 最近的项目有这样一个需求，引用一个日历组件，我用的方案是element的el-dialog+el-tabs+FullCalendar，但是遇到了一个问题，FullCalendar引用的没有任何问题，在正常的页面中可以正常使用，唯独在el-tabs标签中切换的时候，不能正常显示。如下图所示 二、分析原因 自己琢磨了1个小时，上网查各种资料
elementUi问题总结一tabs标签页
weixin_42979149的博客
02-15 1万+
设置第一个标签不能关闭，其余的都能关闭 el-tab-pane添加:closable=“item.close” <template> <el-tabs v-model="editableTabsValue" type="border-card" @tab-remove='tabs_remove'> <el-tab-pane :...
Vue3中点击关闭按钮后清除 el-table 表单内容
最新发布
李长渊的博客
05-27 1327
Vue3中点击关闭按钮后清除 el-table 表单内容
解决：点击el-tabs切换页面显示时调用多次接口的问题
qq_45259815的博客
07-13 1549
解决使用element组件el-tabs遇到的接口多次调用问题
el-tab-pane实现单击某个tab请求某个活动标签的接口（防止在父组件请求了全部接口，数据量大的时候会造成请求超时）
CPUyi的博客
09-20 1020
el-tab-pane实现单击某个tab请求某个活动标签的接口（防止在父组件请求了全部接口，数据量大的时候会造成请求超时）
elementUI中el-tabs组件接口多次请求解决方案
weixin_49518866的博客
03-30 4074
首先看代码： <template> <el-tabs v-model="activeName" type="card"> <el-tab-pane :label="item.title" :name="item.value" v-for="(item,index) in tabList" :key="index"> <DomesTic v-if="activeName === '1'"></DomesTic>
el-tabs不可手动切换，关闭点击切换，只能外部切换
qq_52140056的博客
08-23 627
给el-tabs标签设置style="pointer-events: none;不可手动切换，需通过外部按钮切换（如：下一步）
解决vue中el-tab-pane切换的问题
10-15
在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
在Vue.js中，`el-tab-pane` 是 Element UI 框架中的一个组件，用于创建选项卡式布局。然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是...
解决Vue对Element中的el-tab-pane添加@click事件无效
06-06
解决Vue对Element中的el-tab-pane添加@click事件无效
el-tabs 切换拦截
kxmdjqq的博客
08-29 522
【代码】el-tabs 切换拦截。
el-tabs标签页 实现标签记录功能、离开页面再次返回标签不变？
SM_Cute的博客
06-21 608
el-tabs标签页 实现标签记录功能、离开页面再次返回标签不变？
vue实现多个tab标签页的切换与关闭
苏苏就是小苏苏的博客
03-06 9692
1.实现效果 2.实现原理 vuex，实现对当前激活项，当前tab列表，当前tab的translateX，当前缓存页，当前路由的状态管理。 将vuex中的数据保存到sessionStorage中，避免页面刷新丢失，当浏览器关闭时，清空数据。 通过ref定位，拿到当前窗口宽度与当前所在路由的tab标签的所有宽度，判断两者，实现对多tab超出窗口宽度的处理。 当点击tab标签页的时候，获取相应的激活项，动态的实现左侧菜单栏的选中状态，用watch监听，updateActiveName和upda
vue中el-tab-pane切换问题
热门推荐
Ella的博客
08-29 4万+
vue中el-tab-pane切换问题 今天在编写vue的时候用到了el-tabs，然后遇到切换的时候，在次打开el-dialog还是上次的状态（因为两次打开的el-tab-pane数量不一样，就出现了问题） 如下： 第一次打开时的状态，打开到第二次的时候 解决方法 给el-tab-pane命名 <el-tabs type="border-card" v-model="activeName...
el-tabs，el-tab-pane选项卡切换
蓦然回首，那人却在，灯火阑珊处。
03-07 2076
<el-tabs v-model="editableTabsValue" type="card" @tab-click="getListData"> data () { return { editableTabsValue: '0', // 头部标签 title_list: [], // 请求参数 goods_params: { course_category_id: 0, page_num:
element-ui tab标签禁止切换
weixin_45914210的博客
11-03 3294
element ui Tab标签禁止切换
el-tabs 切换时还在请求上一个页面接口
啊哈的博客
07-12 1627
el-tabs 切换时还在请求上一个页面接口
vue+element-ui el-tabs切换面板el-tab-pane切换
花椒和蕊的博客
03-01 1万+
在vue项目中，el-tabs在页面的右侧显示，切换面板，下面的内容是正常显示的 效果如下： 代码如下： 父组件 <el-card> <span>数据信息</span> <el-tabs class="tabRight" v-model="activeName" type="card" @tab-click="handleClick"
el-tab-pane点击事件
05-03
el-tab-pane 是 Element UI 提供的一个选项卡组件，它通常和 el-tabs 配合使用。如果你想要在 el-tab-pane 上绑定点击事件，可以使用 v-on:click 或 @click 指令来实现。 例如： ```html <el-tabs v-model=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值