vue项目中使用element-ui的tab标签页，点击切换的时候，只显示初始加载的echarts，其他tab页面不加载echarts

最新推荐文章于 2024-03-26 14:10:04 发布
最新推荐文章于 2024-03-26 14:10:04 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： Vue日常总结 文章标签： echarts 其他 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/120175893
版权

vue项目中使用element-ui的tab标签页，点击切换的时候，只显示初始加载的echarts，其他tab页面不加载echarts

一、问题描述

目前在做一个vue项目，遇到这样一个问题。我使用了dialog去设置一个弹框，弹框里添加tab标签页，然后点击不同的tab，显示对应的内容。其中包括echarts的显示。数据或者其他都正常显示，唯独echarts只显示初始化时的。点击其他tab，echarts不显示，于是就上网查了很多资料。先看一看，之前错误的代码，和效果

在这里插入图片描述
中间代码省略
在这里插入图片描述
在这里插入图片描述
效果如图
初始的时候

最低0.47元/天 解锁文章
丑小鸭变黑天鹅
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中tab切换时Echarts在第二个页面无法正常显示
琞、小菜
03-08 4780
vue中tab切换时Echarts在第二个页面无法正常显示 接手的数据可视化的项目，在某个模块中使用了tab切换来展示不同的数据呈现，结果就出现了问题，第一个页面展示的好好地，但是在第二个页面有的只显示一点点宽度，有的甚至直接就没有了。 经排查是E charts图表在第二个页面渲染的时候无法拿到父元素的高度和宽度造成的，造成这种情况的我所遇到的两种情况，分享给大家。 无法获取高度和宽度原因： 我们...
关于vue打开某个页面之后，再打开其它页面变空白
wx3601的博客
11-13 362
找了半天之后发现是我把dialog写到了div的外面，导致了template中有了两个子元素Vue的渲染出错导致页面空白。今天写前端的时候突然发现之前写完的页面点进去之后，再点其它的页面会变成空白的。将dialog写到div里面就可以了。
vue echarts 记录一个带tab切换的echarts页面 切换的时候如果有一个tab里的echarts没有数据 该如何清空echarts图的数据的问题
最新发布
qq_27806371的博客
03-26 206
const container = document.getElementById('echartsData'); // 获取容器元素 if (this.chartdom) { this.chartdom.dispose(); // 清空之前的实例（如果需要） } this.chartdom = echarts.init(container); // 初始化echarts实例
element ui中tabs页面组件切换没有加载
qq_42628504的博客
11-14 3241
开发中遇到了一个问题就是我使用element ui中的tabs组件时候，每一个tab内嵌套了一个组件页面，但是我发现当切换之后，生命周期都没有走，页面的方法也没有触发 三个tabs 中放了三个页面组件 只是第一次页面加载进来触发了，后期切换都不能触发 解决方法就是 可以采用 tabs的name和每一个组件的隐藏状态同名，并且每一个组件的隐藏状态值都是tabsArr里面的值,并且放在tabsArr里面 当切换之后 对应handleClick方法会判断当前点击的页面name和tabsArr对象里面哪一个属性名
tab第二次切换不加载组件
我的代码没有bug的博客
09-22 421
问题描述： 在进行tab栏切换时，第一次可以加载组件，第二次时组件就不加载了 解决方法： 给组建加上key值 因为vue会复用组件，不会重新渲染组件，添加key值表达这两个是独立的
vue3解决切换tab页每次切换加载数据导致数据缓慢问题
weixin_41621686的博客
01-04 965
使用标识符来进行辨认 有两个tab页 搞个动态加载 在开头的vedioload还没开始加载的时候判断是否加载过 入股已经加载过 则返回 不要重新加载。由标签页的离线和在线数据 都分开管理 使用两个列表：即一个数组两个对象进行存储 数组的下标有tab0 tab1 动态决定 代替原来的直接覆盖数据。loadvideos会根据loadedTabs的状态决定是否需要加载数据。
vue项目keep-alive 点击tab标签（tagsView）缓存页面，点击左侧菜单清除单个缓存（新增源码地址）
wocwin的博客
08-05 5130
vue项目keep-alive 点击tab标签（tagsView）缓存页面，点击左侧菜单清除单个缓存（新增源码地址）
使用Vue.js和Element-UI做一个简单登录页面的实例
10-18
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
Vue中正确使用Element-UI组件的方法实例
10-14
主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-element-ui-scaffold-webpack4:vue下基于webpack4构建的多页面、多环境方案脚手架项目（使用了element-ui，可替换为其他）
04-27
本项目为vue下使用了element-plus并基于webpack5构建的多页面、多环境方案脚手架项目。 1. 安装 git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git # git checkout vue3 cd vue-element-ui-...
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
主要介绍了vue+element使用动态加载路由方式实现三级菜单页面显示的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目tab切换页面偶尔不显示的问题
lgdaren的博客
08-24 1809
项目开发过程中遇到一个bug，tab切换页面，某一块会莫名其妙消失不显示，控制台报错 vue cannot read property ‘length’ of null。查阅了资料说可能是因为数据加载需要一段时间，此时渲染数据找不到数据length报错导致的，需要用v-if判断一下数据有没有。但是试了这个方法发现还是不行。最后在同事的帮助下找到了问题的解决方法。只需在给数据赋值的时候做个处理。 t...
解决ElementUI中table组件无法正常加载数据的问题
ForgivenCheney的博客
07-03 9923
[Talk is cheap. Show me the code] 不想看理论知识请直接移步最后代码示例。 问题描述： 将Element中table组件进行了二次封装后，在后端接口未给出时，自己在页面写了一些假数据，但数据赋值过程中，页面未进行正常渲染数据。 解决方法： Vue.nextTick(()=>{ //确保DOM节点已经生成，在这里对表格进行赋值，===>表格未渲染数据...
vue+element开发中tabs只加载该标签页下的数据，动态加载其他tab下的数据
weixin_38761920的博客
07-13 3181
实现要求： 打开当前界面时，只加载当前标签页数据组件内容，而不是默认的将所有标签页都加载完毕，而是在切换标签页时候，加载数据。 方法：添加v-if判断，在当前标签页时，就将其对应的isShow设为true <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-if="isShow" name="queryFeature">xxx</el-tab-pane> <el
v-if 切换 el-tabs 加载 ECharts 错误问题（二）
Hello_MrShu的博客
09-29 1093
vue项目在使用elementUI的el-tabs组件时，通过v-if切换两个tabs，当tabsA和tabsB中有相同name的tab时会报错：Duplicate keys detected: 'tab-xxx'. This may cause an update error.
el-tab页签懒加载
warrah 南极狼
02-08 1665
懒加载 页签
vue项目切换页面echarts不显示的问题
paidaboluo的博客
09-05 1721
vue项目切换页面echarts不显示的问题
vue tab切换时echarts不显示问题解决方案
thankna的博客
05-19 3875
使用vuetifyUI，其他UI也是同理。 一、echarts不显示问题原因： 1.tab的绑定事件onChange还是onClick 2.找不到对应id的Dom 二、解决方案 1.看下面的代码，两个事件应该分别在两个标签里加载。这个是我加debugger硬试出来的。 <v-tabs v-model="tab" align-with-title ..
使用 element-ui 中实现Tab点击切换内容，可以效果样式 可以实现点击切换效果
05-25
是的，使用 element-ui 中的 Tabs 组件可以很方便地实现 Tab 点击切换内容的效果，并且也可以自定义样式。 首先，在需要使用 Tabs 组件的页面中引入 Tabs 组件： ```vue <template> <el-tabs v-model="activeTab"> <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane> <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane> <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane> </el-tabs> </template> <script> import { Tabs, TabPane } from 'element-ui'; export default { components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane }, data() { return { activeTab: 'Tab 1' } } } </script> ``` 在上面的示例中，我们使用了 `el-tabs` 和 `el-tab-pane` 组件来创建 Tabs，并且使用 `v-model` 指令来绑定当前选中的 Tab。Tabs 中的每个 Tab 都由 `el-tab-pane` 组件来表示，它们的 `label` 属性用来设置 Tab 的显示名称，而标签对之间的内容则是 Tab 的内容。 可以在 `el-tabs` 组件上添加 `type` 属性来设置 Tab 的类型，比如 `card` 表示卡片式的 Tab，`border-card` 表示带边框的卡片式 Tab 等等。 ```vue <template> <el-tabs v-model="activeTab" type="card"> <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane> <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane> <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane> </el-tabs> </template> <script> import { Tabs, TabPane } from 'element-ui'; export default { components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane }, data() { return { activeTab: 'Tab 1' } } } </script> ``` 除此之外，我们也可以自定义 Tab 的样式，比如设置 Tab 的背景色、文字颜色、边框等等： ```vue <template> <el-tabs v-model="activeTab" class="custom-tab"> <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane> <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane> <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane> </el-tabs> </template> <script> import { Tabs, TabPane } from 'element-ui'; export default { components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane }, data() { return { activeTab: 'Tab 1' } } } </script> <style scoped> .custom-tab .el-tabs__header { background-color: #f2f2f2; border-radius: 4px; } .custom-tab .el-tabs__item.is-active { color: #fff; background-color: #409EFF; border-color: #409EFF; } .custom-tab .el-tabs__item { color: #606266; border-color: #dcdfe6; } </style> ``` 在上面的示例中，我们为 `el-tabs` 组件添加了一个名为 `custom-tab` 的 class，然后在样式表中设置了该 class 下的 Tab 的样式。这样就可以实现自定义样式的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值