el-tab设置默认激活的标签页实现步骤
更新时间：2023年09月25日 08:57:09 作者：覆水难收呀
这篇文章主要给大家介绍了关于el-tab设置默认激活的标签页实现步骤,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
我们先看看官方文档：
步骤一：在每个el-tab-pane中间加个name属性
步骤二：在el-tabs标签里绑定属性v-model="activeTab"，activeTab是随便自己设置的名称。
步骤三：在data数据里面存储你在el-tabs标签里绑定属性v-model所对应的参数名activeTab
此时我设置的 activeTab: 'body',那么此时就是默认激活的标签页是 el-tab-pane标签里面的name="body"的标签页，也就是请求体这个标签页。
下面上传源代码，让大家自己尝试一下哈。
<el-tabs v-model="activeTab" type="border-card" style="min-height: 350px">
<el-tab-pane name="headers" label="请求头(Headers)">
<CodeEdit height="280px" v-model="headers"></CodeEdit>
</el-tab-pane>
<el-tab-pane name="body" label="查询参数(Params)">
<CodeEdit height="280px" v-model="params"></CodeEdit>
</el-tab-pane>
</el-tabs>总结
到此这篇关于el-tab设置默认激活的标签页的文章就介绍到这了,更多相关el-tab设置默认激活标签页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue3基于rem比例缩放方案,本缩放方案置于hooks中即可，文中通过示例代码介绍了vue-cli3 中使用rem布局的方法，需要的朋友可以参考下2023-05-05
今天我们来说一说vue1.0和vue2.0的主要变化有哪些？对vue相关知识感兴趣的朋友一起学习吧2017-05-05
这篇文章主要介绍了vue中返回结果是promise的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue router仿天猫底部导航栏功能,需要的朋友可以参考下2017-10-10
解决vue-cli项目webpack打包后iconfont文件路径的问题
今天小编就为大家分享一篇解决vue-cli项目webpack打包后iconfont文件路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue实现动态给data函数中的属性赋值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 国际化 vue-i18n 双语言 语言包的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了vue使用leafLet方式(绘图工具),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue如何实现在线编辑excel问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了Element table 上下移需求的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
最新评论