vue中使用elementUI使用el-tabs，切换Tab如何实现实时加载，以及el-table表格使用总结
创始人
2025-06-01 20:36:07
0次

当我们在开发中遇到tab切换，这时候用el的el-tabs感觉很方便

但当我在把代码都写完后，发现一个问题就是页面打开时

虽然我们只能看见当前一个tab页，但是vue会帮你把你写的所有tab页的内容都渲染出来了，只是其他的隐藏了，同时其他tab的js也都走了一边，当你点击tab时js就不会再去请求后台

这种机制会造成一个问题，就是如果每个tab页的数据都过大的时候，可能就会导致首次打开页面卡顿现象，同时如果数据库数据在实时发生变化的话，比如你一分钟前打开的这个页面，看的是tab1的内容，看了1分钟后我想看tab2的内容，但此时tab2的内容后台数据库已经发生变化了，你能看到的只是1分钟前的数据，那该怎么解决这个问题呢？

首先一开始一次加载所有tab的代码是这样的↓

这时候v-if的作用就可以发挥出来了，当v-if的值为false时vue是不会去渲染该标签下的内容的

那我们就把tabs下的子模块标签上加v-if，一开始只设置其中一个为true其他都为false，当点击tab切换时去改变v-if的值，代码如下↓

js代码如下：

这样就可以完美解决上面的问题，首次加载页面只会渲染其中一个tab的内容，同时点击tab切换时页面重新渲染页面，good！

---------------------------------------------------------------------------------------

el-table中动态表头的写法

其实就是一个v-for循环，根据后台返回数据生成对应表头

js里的数据绑定：

tableHeader: [{name: '手机号码',key: 'partnerPhone'},{name: '姓名',key: 'partnerName'},{name: '职位',key: 'position',formatter: this.posFormatter},{name: '团队',key: 'teamName'},{name: '代理商',key: 'agentName'},{name: '状态',key: 'state',formatter: this.stFormatter}]

记录 转载此：https://www.cnblogs.com/tingshengshiyu/p/14378049.html?ivk_sa=1024320u

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：ANTLR4学习【打造你自己的表达式规则】

下一篇：最新或2023（历届）婚礼主持词 10多年的婚礼主持词 2023年最新婚礼主持词完整版

相关内容

热门资讯

最新或2023（历届）关于一二... 　　最新或2023（历届）12月9日是纪念一二九爱国运动的八十周年，下面是小编给大家整理的关于一二九...
最新或2023（历届）感恩节黑... 　每年11月的第四个星期四是美国传统的感恩节。在美国人的心目中，感恩节的重要性仅次于圣诞节。这是一个...
最新或2023（历届）感恩节黑... 　　下个星期四就是感恩节了，大家都准备好感恩节的黑板报资料了吗?一起来参考下小编给大家整理的具体内容...
最新或2023（历届）中小学纪... 　一二九运动是指1935年12月9日发生在北平的一次伟大的抗日救亡运动。最新或2023（历届）的一二...
最新或2023（历届）班级纪念... 　中国共产党领导的一次学生爱国运动。1935年12月9日，北平(今北京)学生数千人在中国共产党领导下...
最新或2023（历届）感恩节黑... 　　感恩节是美国国定假日中最地道、最美国式的节日，而且它和早期美国历史最为密切相关。感恩节就在每年1...
最新或2023（历届）感恩节黑... 　　每年11月的第四个星期四为感恩节(英语：Thanksgiving Day)。这是美国Day)。这...
最新或2023（历届）漂亮感恩... 　　感恩节(Thanksgiving Day)是美国人民独创的一个古老节日，也是美国人合家欢聚的节日...
最新或2023（历届）感恩节中... 　　感恩节(Thanksgiving Day)是美国人民独创的一个古老节日，也是美国人合家欢聚的节日...
最新或2023（历届）最新感恩... 11月的第四个星期四是感恩节。感恩节是美国人民独创的一个古老节日，也是美国人合家欢聚的节日，因此美国...
最新或2023（历届）全国法制... 　　最新或2023（历届）全国法制宣传日是最新或2023（历届）12月4日 星期五，关于法制宣传日的...
最新或2023（历届）法制宣传... 中共中央、国务院于2001年4月26日转发的《中央宣传部、司法部关于在公民中开展法制宣传教育的第四个...
最新或2023（历届）小学生感... 　　本周四就是感恩节了，小编精心给大家整理了关于感恩节的黑板报内容：感恩节的小故事，希望对同学们都有...
最新或2023（历届）感恩节的... 　　感恩节是美国国民首创的一个陈旧节日，也是美国人合家欢聚的节日，下面是关于感恩节的黑板报资料介绍，...
最新或2023（历届）全国法制... 　　最新或2023（历届）法制宣传日的主题是：大力弘扬法治精神，共筑伟大中国梦。下面是小编给大家整理...
国庆节主题儿童画图片素材大全,... 　　亲爱的朋友们，转眼又是这个熟悉的国庆节，我的祝福分分秒秒，我的关心时时刻刻，就在你的身边！愿我的...
最新或2023（历届）儿童画图... 　　最新或2023（历届）儿童画迎国庆-欢乐国庆节，神州大地繁花似锦，祖国长空乐曲如潮，欣望江山千里...
三年级国庆节儿童画图片素材大全... 　　三年级国庆节儿童画-祖国妈妈，国庆国庆，普天同庆。喜气喜气，增添福气。祖国妈妈的生日就要到了，这...
迎国庆儿童画图片素材大全,庆贺... 　　迎国庆儿童画-庆贺国庆节，锣鼓喧天，歌舞翩跹，国庆佳节，喜临人间;碧水含情，青山带笑，快乐好运，...
国庆节儿童画图片素材大全图片,... 　　小朋友们，你们喜欢国庆节吗？国庆节一到我们就放长假啦，我们就可以出去玩啦，你们说不好吗？是啊，国...