使用VUE + ElementUI 中的 tabs组件，造成重复请求接口的情况

使用VUE + ElementUI 中的 tabs组件，造成重复请求接口的情况

网上已经有很多文章了，这里不再长篇叙述，只是大概总结要点。

想了解详细内容，可以参考其他文章：

1、​​VUE +ElementUI，tabs组件小坑——单页面被重复构建​​

2、​​vue + element-ui 制作tab切换（切换vue组件，踩坑总结）​​

问题描述：

做项目的时候，很多时候，我们的页面构建都是根据后端接口返回的数据来动态生成的页面元素，比如tabs页签数据、按钮组的数据、表头数据、表格body数据很多时候都是动态生成的。

但是页签数据在使用 elementui 中的 el-tabs 的时候，动态生成的页签元素，在页面加载的时候会造成重复请求接口的情况，这肯定不是我们想要的效果。

解决方案：

方案一、不动态生成页签数据，直接写死（有几个页签，就写几个 el-tab-pane ）

方案二、通过 true 和 false 控制页签下面的内容是否渲染

此方法适用页签下面的内容是组件的时候。之前做的项目碰到过这种写法，是我自己摸索出来的，这里不过多赘述。具体参考文章 ​​vue + element-ui 制作tab切换（切换vue组件，踩坑总结）​​里面的内容。我觉得这个方法有个缺点就是如果有多个页签（例如有8-10个页签）的话，就要依次判断，写的代码比较多，而且看上去比较low。

参考的文章截图：

方案三：舍弃 elementui 的标签组件，自己封装一个。

自己封装的 tab 页签组件适用于展示每个页签下面的内容，彼此不关联，因为每个页签下面的内容也是通过 v-if 判断加载的。如果碰到新增或者编辑页面，通过保存按钮统一保存页面内容与接口交互的话，自己封装的组件就不适用了， 这个时候就要采取方案一了。

自己封装的页签组件代码：

这个组件里面的代码，有带附属页签的，这个是目前我做的项目碰到的需求，所谓的主页签和附属页签的效果如图：

如果项目中没有附属页签，只有主页签的话，这个组件依然适用，只要不传附属页签的数据即可。

-----------------  完结  -----------------

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。