el-tab设置默认激活的标签页

这篇具有很好参考价值的文章主要介绍了el-tab设置默认激活的标签页。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们先看看官方文档:

el-tab-pane,测试开发,前端,javascript,开发语言

el-tab-pane,测试开发,前端,javascript,开发语言

 

步骤一:在每个el-tab-pane中间加个name属性

el-tab-pane,测试开发,前端,javascript,开发语言

 步骤二:在el-tabs标签里绑定属性v-model="activeTab",activeTab是随便自己设置的名称。

el-tab-pane,测试开发,前端,javascript,开发语言

步骤三:在data数据里面存储你在el-tabs标签里绑定属性v-model所对应的参数名activeTab

此时我设置的 activeTab: 'body',那么此时就是默认激活的标签页是 el-tab-pane标签里面的name="body"的标签页,也就是请求体这个标签页。

el-tab-pane,测试开发,前端,javascript,开发语言

下面上传源代码,让大家自己尝试一下哈。文章来源地址https://www.toymoban.com/news/detail-591198.html

<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设置默认激活的标签页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-tab-pane 和el-tooltip及el-tree 组合使用

    这里主要是在el-tab-pane中的label属性不给赋值,单独写在el-tooltip中,使用span去写当前的名称,就可以实现鼠标放上去,浮现树的效果。

    2024年02月13日
    浏览(41)
  • 如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?

    最近开发项目时,在 el-tab-pane 标签上使用 v-show,即使  v-show  的值为 false,el-tab 的标签仍然展示。即使将  v-show  加在 slot 子节点上,也会显示 tab 的背景图和 close 图标;如下图: 所以针对该问题,各种方案做了一个尝试,下面做一个总结,希望对你有帮助。 但是有些场

    2024年01月19日
    浏览(43)
  • el-tabs 默认选中第一个

    1. 实际开发中el-tabs 都会设置第一个为默认值 ,这样会好看一点,   而渲染的数据经常是通过后端返回的数据 , v-model  无法写死默认值   解决办法 , 通过计算机属性  ,在data 定义一个 selectedTab 

    2024年02月06日
    浏览(39)
  • elementui的el-tabs标签页样式修改

    1.去掉下划线 效果:   代码: 2.改变下划线颜色 效果:    代码: 3.改变选中文字/鼠标滑过时文字颜色 效果:  代码: 4.设置未选中时文字颜色 效果:   代码:

    2024年02月11日
    浏览(35)
  • element ui中el-tabs 标签页使用技巧

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 当我们使用el-tabs不要按照固化的思路去写每一页的具体内容,可以通过放在el-tabs外部,相同内容,来让代码更简洁 提示:以下是本篇文章代码,下面案例可供参考 提示:这里简单的介绍了一个el-tabs的使用

    2024年02月16日
    浏览(44)
  • 解决element ui中el-tabs标签点击切换闪屏问题

    现象:点击切换 element ui中el-tabs时候,table会出现闪一下的状况; 初始element ui中el-tabs组件代码如下: 使用v-if=\\\"activeName===\\\'first\\\'\\\" 解决闪屏   改造后代码如下:

    2024年02月07日
    浏览(45)
  • element UI el-tabs组件使用

    使用 Elemenet UI 框架中的 el-tabs 组件 平时在做项目时,tab切换效果几乎是必不可少的,下来整理一个最近做的一个小功能:el-tabs    说明: v-model:当前选中项 :tab-position:tab栏显示方向 @tab-click:切换tab栏的事件 JS:

    2024年02月11日
    浏览(44)
  • 改变element-ui中el-tabs组件的样式

    2024年01月24日
    浏览(48)
  • 【Element】实现基于 Element UI el-tabs 的左右滑动动画

    在构建现代 web 应用时,为用户提供平滑的动画效果是提升用户体验的关键。本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画。 首先,我们需要创建一个基础的 el-tabs 组件,用于展示不同的内容区域。 我们希望了解用户是向左

    2024年03月14日
    浏览(48)
  • Element-ui中el-tabs的下划线样式微调

    1.页面加载周期结束之后调用方法          2.写这个方法 3.el-tabs上绑定ref就可以了          4.结果:下划线就可以向左边偏移一点了,看起来更好看  

    2024年02月11日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包