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设置默认激活标签页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了2023年最新的vue.js下载和安装的3种方法,每种方法结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue 浏览器本地存储,LocalStorage 和 SessionStorage 统称为 WebStorage，存储大小一般支持5mb左右，但是不同的浏览器也有区别，具体内容介绍跟随小编一起看看吧2022-04-04
vue3中实现响应式数据的方法是就是使用ref和reactive,所谓响应式就是界面和数据同步,能实现实时更新,下面这篇文章主要给大家介绍了关于Vue3中ref和reactive的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了Vue之ElementUI Form表单校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vue下如何利用canvas实现在线图片标注，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue2.0 自定义组件的方法（vue组件的封装）,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-06-06
本文主要介绍了vue获取el-form的整体验证状态，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue项目中请求数据特别多导致页面卡死的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue中导入excel文件的两种方式,大概有两种导入文件的方法：form表单和el-upload，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
这篇文章主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论