element tabs页显示与隐藏后的默认激活状态

最新推荐文章于 2024-05-01 12:51:13 发布
最新推荐文章于 2024-05-01 12:51:13 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： vue+element  实现标签页的显示与隐藏 文章标签： vue.js elementui javascript tab
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43834978/article/details/110182195
版权

vue+element tabs页显示与隐藏后的默认激活状态

废话不多说 直接上代码，看图片
tab页隐藏之前的激活状态
在这里插入图片描述
在这里插入图片描述
tab隐藏之前我们是通过手动写的 activeName:‘1’ 实现的第一个tab页的默认激活状态，但是如果我们通过函数隐藏掉第一个tab页的内容是，例如用户没有权限查看，就不会显示，这时我们的activeName应该写多少呢？
这种情况可以通过默认给active一个空字符串，默认空字符串会被element ui解析为 0
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

qq1048330828
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuejs中如何实现三级路由并刷新页面时保持当前路由激活状态
itclanCoder
09-15 2516
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言之前有介绍过vuejs中的路由的传参及路由的props配置,对于如何配置一级路由,二级路由,对于很多同学来说,基本上没什么难度然后在配置三级路由以上的时候,往往却没那么容易,会出现...
element-ui显示和隐藏某个tab标签
肖肖肖丽珠的博客
08-17 4239
<el-tabs v-model="activeName" ref="tabs"> <el-tab-pane label="基本信息1" name="first" > 基本信息</el-tab-pane> <el-tab-pane label="基本信息2" name="second" > 基本信息</el-tab-pane> <el...
el-table数据为空时默认为-或者0
gongliming_qd的博客
09-09 2535
外层class /deep/{ .cell:empty::before { content: "-"; color: gray; } .is-leaf{ .cell:empty::before { content: "-"; color: gray; } } }
element-ui中的el-tab-pane实现显示隐藏的方法
zuo-yiran的博客
02-18 2万+
直接用v-show是不起作用的，经过查找是说v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效，那么要实现显示隐藏的控制可以进行使用如下的方式： 方式一： 最简单有效的用v-if取代v-show实现。 方式二： 在el-tabs标签上添加ref，通过js进行控制，具体实现如下： 例子： <el-tabs v-model="activeName" @tab-click="handleClick"
el-tabs作为子组件使用页面空白
最新发布
xixi_csdn的博客
05-01 621
如果el-tabs是子组件，父组件传值value / v-model为空字符，这个时候在watch中监听value / v-model就会发现监听的数据会被调用为‘0’。一定是作为子组件引用，且在watch进行监听，且vuex没有缓存。就刚进入页面的时候会出现空白页面，点击tab之后就不会再有问题了，因为value / v-model数据更新了。当然如果你的tabPanes中的code原本就为‘0’，那就不会出现这个问题了，因为value / v-model匹配的到页面。
el-tab设置默认激活的标签页
Sean_0819的博客
09-04 7283
我们先看看官方文档： 此时我设置的 activeTab: 'body',那么此时就是默认激活的标签页是 el-tab-pane标签里面的name="body"的标签页，也就是请求体这个标签页。 下面上传源代码，让大家自己尝试一下哈。
vue实现多个tab标签页的切换与关闭
aaa123aaasqw的博客
05-11 3893
当关闭tab标签的时候，splice删除当前标签，若是删除的最后一项，跳转到该项的前一项页面。当长度为1时，跳转到首页。通过ref定位，拿到当前窗口宽度与当前所在路由的tab标签的所有宽度，判断两者，实现对多tab超出窗口宽度的处理。vuex，实现对当前激活项，当前tab列表，当前tab的translateX，当前缓存页，当前路由的状态管理。当点击tab标签页的时候，获取相应的激活项，动态的实现左侧菜单栏的选中状态，用。中，避免页面刷新丢失，当浏览器关闭时，清空数据。将vuex中的数据保存到。
vue+element tabs选项卡分页效果
12-13
在本例中，我们将讨论如何使用 Vue 和 Element UI 来实现选项卡（tabs）结合分页的交互效果。 首先，我们来看一下文件目录结构。在这个项目中，`/account` 是一个路由路径，它会加载 `home.vue` 作为布局页面，并且...
vue2.* element tabs tab-pane 动态加载组件操作
01-21
一、重要部分 1、 注意 <component is=item.content></component> ：表明模板 (item) key=item.name label=item.title name=item.name > <component is=item.content></component> 2、content: ‘Jbxx’ ，...
vue2通过权限控制tab标签显示和隐藏
DZQ1223的博客
11-28 1560
在开发过程中，我们可能会遇到这样一个场景：根据不同权限对tab栏内容进行控制，这时候用自定义指令v-permission就达不到我们想要的效果，其是将当前节点的子元素进行移除，此时当前节点依然存在，如下图所示。这时候就需要利用v-if自定义控制，其思路实：v-if中执行一个函数，函数传入一个权限值。在函数中判断权限值是否属于权限菜单内，返回布尔类型值。<el-tab-pane label="负荷跟踪" name="first" v-permissions="['load_track']">
使用elementui制作menu菜单栏与tabs标签页
qq_51758070的博客
08-19 4210
使用elementui制作，el-menu菜单栏与el-tabs标签页实现动态跳转
关于elementUI中Tabs组件使用v-if隐藏tab后剩余tab不显示内容的解决方案
Stone的博客
12-18 5592
关于elementUI中Tabs组件使用v-if隐藏tab后剩余tab不显示内容的解决方案 我们在使用elementUI的Tabs的时候有时候会这样用 <template> <el-tabs v-model="activeName"> <el-tab-pane v-if="checkTab('first')" label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane v-if=
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题？
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
01-17 1290
最近开发项目时，在 el-tab-pane 标签上使用 v-show，即使v-show的值为 false，el-tab 的标签仍然展示。即使将v-show加在 slot 子节点上，也会显示 tab 的背景图和 close 图标；如下图：所以针对该问题，各种方案做了一个尝试，下面做一个总结，希望对你有帮助。
vue通过权限控制tab标签的显示和隐藏
qq_39650950的博客
04-16 5196
在某些情况下，它是不适合使用v-hasPermi，如元素标签组件，只能通过手动设置v-if。 可以使用全局权限判断函数，用法和指令 v-hasPermi 类似。 自定义的v-hasPermi指令，无法控制标签，测试页面按钮可以正常控制 <template> <el-tabs> <el-tab-pane v-if="checkPermi(['system:user:add'])" label="用户管理" name="user">用户管理</el-tab-
element-ui 通过v-show去显示和隐藏tabs的pane
u013379933的博客
08-12 2万+
通过v-if去控制tabs的pane显示和隐藏，会赞成数据无法保留，因为v-if会销毁组件，再重新创建。 我这里是通过设置选项卡的显示和隐藏（控制display）来做到的 // watch监听 watch: { 'ruleForm.isbrand' : { // 监听ruleForm的isbrand(是否品牌)被选中了 handler (newVal, oldV...
element的tabs组件使用问题解决
爱米酱的博客
10-27 1019
最终的解决办法就是不使用el-input。而是使用原生的input。这样光标就不会总在最后一位了。
elemenui中el-tabs动态渲染，默认展示第一个
m0_51737569的博客
12-30 4460
【代码】elemenui中el-tabs动态渲染，默认展示第一个。
Vue里使用Element UI的Tabs時el-tab-pane的隱藏和顯示
热门推荐
losedguest的博客
04-26 3万+
1.效果圖 隱藏相關項后 <el-tabs v-model="selectTab" ref="tabs" type="border-card" tab-position="top" @tab-click="handleTabClick"> <el-tab-pane name="0" :label="$t('main.vie...
easyUI tabs 显示与隐藏 tab 页
05-31
要在 EasyUI Tabs 中显示或隐藏选项卡页，您可以使用以下代码： 显示选项卡页： ``` $('#tab').tabs('showTab', index); ``` 其中，`#tab` 指 EasyUI Tabs 控件的 ID，`index` 是要显示的选项卡页的索引。 隐藏选项卡页： ``` $('#tab').tabs('hideTab', index); ``` 同样，`#tab` 指 EasyUI Tabs 控件的 ID，`index` 是要隐藏的选项卡页的索引。 请注意，隐藏一个选项卡页并不会从 DOM 中删除它，它只是被隐藏了。如果您想要删除一个选项卡页，请使用 `removeTab` 方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值