element-tabs中切换时候出现卡顿的解决

已于 2023-08-01 11:02:18 修改
阅读量1.8k 收藏
点赞数 2
分类专栏： elementUI 文章标签： 前端
于 2023-05-31 15:52:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a99101/article/details/130970762
版权

切换卡顿将v-show改为v-if

<el-tabs v-model="activeName">
      <el-tab-pane label="角色管理" name="first">
          <listContentVue  v-if="activeName === 'first'" :listData="listData">            
          </listContentVue>
      </el-tab-pane>
      <el-tab-pane label="权限管理" name="second">
          <listContentVue  v-if="activeName === 'second'" :listData="listData">        
          </listContentVue>
      </el-tab-pane>
</el-tabs>

一路向前的月光
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 Element-UI 的 el-tabs 组件，浏览器卡住了
2401_84092508的博客
04-09 862
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！点里面都有更细化的内容！点击【学习资料】即可领取！[外链图片转存中…(img-XZewDvie-1712594238317)][外链图片转存中…(img-Mfhr9dVa-1712594238318)]
vue 多个el-tabs切换时表格加载慢
qq_37342720的博客
11-22 3663
近日前端遇到一些问题，客户提出问题：当出现多个el-tab时，里面的el-table加载总是会实实在在的看到表格宽度的变化，让用户体验不是很好。 于是 看帖子https://blog.csdn.net/chuxuan0215/article/details/100522348找到了解决方案 主要是 这段话 延迟100毫秒 加载表格布局。 setTimeout(()=>{ this.$refs.tableMachineData.doLayout() },100); <el..
vue+element开发项目，使用tab页的时候导致浏览器卡死的解决办法
Z_Joker_J的博客
06-05 1496
el-tabs导致浏览器卡死问题 用了vue-element-template模版二次开发，项目中需要用到el-tabs 结果一用就卡死。 根据网上建议，在<el-tab-pane>标签里不放任何元素，可以。 但是无法满足项目需求。 于是继续找， 最后确定是element和vue版本冲突问题。 目前elemntUI的最新版本是2.13.0，vue版本是 "vue": "^2.6.11", "vue-aplayer": "^1.6.1", "vue-rout...
已解决vue element 用el-tabs浏览器卡死的问题
疑问 搜索 动手 解决 记录
03-17 7114
文章最后有答案 遇到这个问题 ,起因用 el-tab-pane 与 el-dialog 组合导致浏览器卡死。 经过分析原因是 el-tab-pane 添加 内容 会出现内部死循环，从而导致浏览器卡死。 困惑许久 , 查询良久 ,列出了几个网上大仙们给的答案 , 如下: 一 . 降低版本系列(已尝试 , 垃圾没有效果) 二 . 重装tabs插件,全局引入系列(已尝试 , 垃圾没有效果) 三 . 算了直接给你们放最搞笑的一个(虽然搞笑,但是是唯一一个成功的) 哈哈哈哈,没有看到这图上评论的时候 , 我和同
解决elenemtUi中使用el-tabs组件多个标签页切换el-table时，出现宽度压缩(缩小)的问题
qq_45404003的博客
07-28 2916
需要注意的是，doLayout() 方法只能在组件完全渲染后才能调用，否则可能会出现计算不准确的情况。解决方法就是使用el-table组件中的doLayout()方法是用来重新计算组件大小和位置的。当我们对组件进行动态修改后，可能会导致组件大小或者位置发生改变，此时可以调用 doLayout() 方法来重新计算并更新组件的布局。这样就会重新计算并更新表格的布局。
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题
08-30 1688
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题 解决办法： 给 tab 添加 v-if ，绑定 dialog 的 visible.sync <el-dialog :visible.sync="linkSelecterShow"> <el-tabs v-model="activeName" :visible.sync="linkSelecterShow"> <el-tab-pane label="用
解决element-ui中多个table在tab切换时出现宽度缩小的问题
热门推荐
bestcjt的博客
12-19 1万+
用的是vue的element-ui前端框架 今天遇到一个小问题，花了我几个小时才研究 先看图 我需要在两个tab中各自放一个table，并且其中一个table的数据变化时，另一个table也需要变化，当我在第一个table删除数据后，第一个table会刷新，然后第二个table也会刷新。然后我切换到第二个tab时，table变成这样了，表格的宽度缩小。 研究了好久，最后用以下方...
elementui中el-tabs切换时渲染数据，并且只有在首次切换时才会执行函数刷新数据
weixin_47602884的博客
11-29 4124
elementui中el-tabs切换时渲染数据，并且只有在首次切换时才会执行函数刷新数据
el-tabs 切换时还在请求上一个页面接口
啊哈的博客
07-12 1602
el-tabs 切换时还在请求上一个页面接口
解决vant中 tab栏遇到的坑 van-tabs
01-18
所以，大部分人的解决办法就是将当前选中的tab的索引缓存起来，等回到该页面的时候，让被缓存的那个高亮显示出来。 坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在...
手动动态改变el-tabs标签页顺序
06-28
例如：tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4（往后移）则顺序变为tabs1、tabs3、tabs4、tabs2； tabs4改为tabs2（往前移） 则顺序变为tabs1、tabs4、tabs2、tabs3。
标签(Tabs)实现多页面切换
10-30
用js实现的多页面切换功能，应用到ajax，动态加载所需要的页面及所传递参数，有滚动条，很好的东西哦因为用到ajax，需要在server下才能看到正常加载状态
解决vue中el-tab-pane切换的问题
11-20
今天在编写vue的时候用到了el-tabs，然后遇到切换的时候，在次打开el-dialog还是上次的状态（因为两次打开的el-tab-pane数量不一样，就出现了问题） 如下： 第一次打开时的状态，打开到第二次的时候 解决方法 给el-tab-pane命名 在script中 data() { return { isShow: '', activeName:'second' } }, 在每次关闭弹框的时候，在关闭方法中重置activeName
DIY jquery plugin - tabs标签切换实现代码
10-28
接触jquery 2,3个月了，一直都未动手写过插件。正好最近比较闲，就打算把一直看不顺眼的项目中现有的tab改造一番（现有的tab未能做成一个控件，copy,past的代码太多）。
docsify,docsify-tabs 展示插件
最新发布
09-21
docsify,docsify-tabs
vue中element 的 el-table数据量大时，出现卡顿情况解决办法
qq_39250610的博客
12-26 3117
el-table 数据量大出现页面卡死情况解决
vue+elementui 使用tabs 浏览器会卡死问题
scy_fighting的博客
11-26 8928
最近在用vue+elementui开发后台管理系统，竟然出其不意的遇到了神坑（使用tabs  浏览器会卡死问题）。问遍了身边的前端工作者，表示木有任何一个来遇到该问题。于是，翻翻白眼，能怎么办。于是乎，暂时先放弃了，但是偶然之间发现了这个问题。 原来是自己的问题，但是这个问题，也是需要注意的，就是 ，使用elementui里面的组件时，要用&lt;el-row&gt; &lt;el-col :s...
element-ui el-tabs 页面卡死问题
潇兮水寒的博客
07-25 1575
直接贴源码： <el-card> <el-alert title="标题" :closable="false" show-icon type="warning"> </el-alert> <el-row class="my_row"> <el-col> <!-- 注意这里 a--> </el-col>
如何实现 element-plus tabs切换动画效果
09-02
### 回答1： 要实现 element-plus tabs 切换动画效果，可以使用 CSS 过渡（transition）属性以及在切换时添加/移除 CSS 类名的方式来实现。具体方法如下： 1. 在选项卡（tab）容器上添加 CSS 类名，比如 "tab-container"。 2. 在选项卡头部（tab header）中的每个选项卡按钮上添加一个自定义属性，比如 "data-tab-index"，值为对应选项卡的索引，以便在后面的代码中使用。 3. 使用 CSS 过渡属性来设置选项卡内容容器（tab content）的动画效果，例如： ```css .tab-content { transition: opacity .3s; } .tab-content-enter-active, .tab-content-leave-active { opacity: 0; } ``` 这里使用 opacity 属性来控制选项卡内容容器的可见性，在过渡时将其从 1 到 0。 4. 在选项卡按钮点击事件的处理函数中，先获取当前选项卡的索引，然后根据索引找到对应的选项卡内容容器，并添加 / 移除 CSS 类名，以实现过渡效果。例如： ```javascript const container = document.querySelector('.tab-container') const tabs = [...container.querySelectorAll('.tab-header button')] const contents = [...container.querySelectorAll('.tab-content')] tabs.forEach((tab, index) => { tab.addEventListener('click', () => { const content = contents[index] if (!tab.classList.contains('active')) { tabs.forEach(tab => tab.classList.remove('active')) tab.classList.add('active') contents.forEach(content => content.classList.remove('active')) content.classList.add('active') } }) }) ``` 这里使用 `classList` 属性来添加 / 移除 CSS 类名，以触发过渡效果。同时需要注意的是，为了在后面的代码中使用，在选项卡容器、选项卡头部和选项卡内容容器中都需要添加相应的 CSS 类名。 ### 回答2： 要实现element-plus tabs切换动画效果，可以遵循以下步骤： 步骤1：在项目中安装element-plus组件库。可以使用npm或yarn命令来安装，具体命令为：npm install element-plus 或 yarn add element-plus。 步骤2：在项目的入口文件中引入element-plus的样式文件。可以在main.js或App.vue文件中添加以下代码引入样式： import 'element-plus/lib/theme-chalk/index.css'; 步骤3：在需要使用tabs组件的页面中引入和使用element-plus的tabs组件。可以在页面的template部分添加以下代码： <template> <el-tabs v-model="activeTab" type="border-card"> <el-tab-pane label="Tab1" name="1"> Content of Tab 1 </el-tab-pane> <el-tab-pane label="Tab2" name="2"> Content of Tab 2 </el-tab-pane> <el-tab-pane label="Tab3" name="3"> Content of Tab 3 </el-tab-pane> </el-tabs> </template> 步骤4：为tabs组件添加切换动画效果。可以使用element-plus提供的transition组件来实现动画效果。在tabs组件外面包裹一个transition组件，并设置相应的属性，如name、enter-active-class等，实现切换时的动画效果。例如： <template> <transition name="fade" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut"> <el-tabs v-model="activeTab" type="border-card"> ... </el-tabs> </transition> </template> 步骤5：在样式文件中为切换动画效果设置相应的CSS样式。可以使用动画库（如animate.css）提供的动画效果，或自定义CSS样式来实现。例如： .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } 这样就可以实现用element-plus的tabs组件切换时的动画效果。根据需要调整步骤4和步骤5中的属性和样式，在页面中实现满足需求的动画效果。 ### 回答3： 要实现 element-plus tabs 切换动画效果，可以按照以下步骤进行： 1. 使用 element-plus 的 Tabs 组件创建页面的 tab 标签。 2. 在 Tabs 组件中，利用事件监听器监控 tab 切换的过程。可以使用 `@tab-click` 事件监听器来实现。 3. 在监听器中，使用 CSS 动画或过渡来实现 tab 切换的动画效果。 4. CSS 动画可以使用 `@keyframes` 来定义动画的关键帧，然后将动画应用到 Tabs 组件上。 5. 过渡效果可以使用 `transition` 属性来实现，在样式改变的时候添加过渡效果。 6. 可以根据需要，设置不同的动画效果，例如淡入淡出、滑动、放大缩小等等。 7. 使用动画效果时要注意性能和流畅度，避免影响页面加载速度和交互体验。 8. 经过以上步骤，即可实现 element-plus tabs 的切换动画效果。 总的来说，实现 element-plus tabs 切换动画效果的关键是将 CSS 动画或过渡应用到 Tabs 组件上，并利用事件监听器来触发动画效果。同时要注意选择适合的动画效果，以增强页面的交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值