iview 重新显示Modal内嵌的Tabs默认选中显示指定项

最新推荐文章于 2023-05-17 14:45:16 发布
最新推荐文章于 2023-05-17 14:45:16 发布
阅读量1.2k 收藏
点赞数 2
分类专栏： iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36061522/article/details/106834794
版权

Tabs的value当前激活 tab 面板的 name，可以展示相应项；但是只有初始加载是有效；当重新显示指定显示项没有用

能用的是 this.$refs.tabs.activeKey = ‘name1’ ，activeKey是活动的TabPane 对应的值是TabPane 中的name值(name1)

<Tabs  ref="tabs">
    <TabPane label="" name="alarmInfo">
        
    </TabPane>
    <TabPane label="" name="alarmVideo" >
      
    </TabPane>
</Tabs>

this.$refs.tabs.activeKey = 'alarmInfo'
fk129
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目引用 iView 组件——Table组件的调用以及默认选中某些项
WXY19951125的博客
11-28 7240
在开发过程中，会遇到这样的需求，用到了Table组件，但是一进来页面需要默认选中某些项…… 前期的iView的安装以及引用就不赘述了，直接切入主题： html结构如下： &lt;!-- demodata：table的一个标识（也可以理解成一个名字） liststyle：定义table需要的格式及其关键字 listdata：指table具体的数据 --&gt; &lt...
iview框架中modal默认按钮点击关闭
哈哈哈蜗牛的博客家
02-22 6707
iview框架中modal默认按钮点击关闭一、第一种方法二、第二种方法 问题： 使用了iview框架自定义的modal弹框，去验证表单之后，点击确认按钮之后，弹框自动就关闭了。 一、第一种方法 使用loading的属性进行控制，延迟状态。 同时使用$nextStick() 是指下次Dom更新之后执行回调，更新到最新的实例Dom结构。 //html: &lt;Modal v-model="edit...
vue + iview页面Modal中内嵌Tabs，每次打开的时候Modal时默认选中Tabs的第一项
lchmyhua88的博客
12-02 2809
文档中说激活面板的name用value，页面第一次加载的时候可以，放在modal里就不好使了，每次打开的时候，当前激活的tab总显示上一次离开时的界面。
iView 2.x嵌套Modal组件层级异常问题
最新发布
BloodyManicure的博客
05-17 800
最近开发中遇到了一个问题，使用iview2.x的Modal组件时出现了嵌套层级异常问题，即我在Modal中嵌套了Modal（实际上我是引入的组件），嵌套的Modal层级在父级Modal的下方。虽说一般建议尽量避免嵌套Modal的情况出现，但是业务中有时不得不需要使用这种方式。解决方法：在父级Modal中添加属性 :transfer="false"即可。
vue $refs ref 属性 及 $nextTick
259的博客
12-21 454
vue ref 属性 $refs $nextTick
Vue 通过事件切换iView的Tabs并拿到tabs值
高压锅博客
08-04 1570
通过事件动态地切换iView的Tabs
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
10-17
本文将深入探讨一个关于iView Modal组件的问题，特别是如何正确控制Modal的显示与隐藏，以及为何在某些情况下使用`v-if`比`v-show`更为合适。 问题背景： 在Vue组件中，我们可能需要实现一个功能，即点击按钮后弹出...
Vue基于iview实现登录密码的显示与隐藏功能
10-15
### iview简介 iView是一套基于Vue.js的开源UI组件库，专为PC界面的中后台产品设计。它提供了丰富的组件和实用的功能，可以帮助开发者快速构建出界面美观且功能完备的Web应用。 ### Vue和iView实现密码显示与隐藏...
iview中 Tabs 标签页 指定显示对应的TabPane页面以及高度随内容撑开问题
weixin_43972213的博客
06-19 6113
tab高度
Vue中通过this.$refs来获取DOM或者组件报错
Andrasen的博客
04-24 3672
1.关于this.$refs的使用场景 如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素 <p ref="p">hello</p> <!-- this.$refs.p 指向该DOM元素 --> 如果ref属性加在组件上，那么this.$refs.name指向该组件实例 <child-component ref="chil...
vue + iview页面Modal中内嵌Tabs，重新显示Modal时默认选中Tabs的第一项
weixin_41996632的博客
10-17 8019
&lt;Modal v-model="modal.visible" width="80%" transfer :title="modal.title" footer-hide&gt; &lt;Tabs ref="tabs" :animated="false"&gt; &lt;TabPane name="name1" &amp
iView页面Modal中内嵌Tabs，重新显示Modal时默认选中Tabs的第一项
weixin_33845881的博客
12-17 1019
文档中说激活面板的name用value，页面第一次加载的时候可以，放在modal里就不好使了，每次打开的时候总显示上一次离开时的界面。 真正能用的是this.$refs.tabs.activeKey = 'name1'，此方法也可以动态设置Tabs页面。 html： <Modal v-model="modal.visible" width="80%" transfer :tit...
iview tabs 顶部导航栏和模块切换栏
热门推荐
sunny_day的博客
09-01 1万+
1.顶部导航栏: html: &lt;div class="tab-pane"&gt; &lt;tabs&gt; &lt;tab-pane label="上崗時間明細" name="detail-report" class="tab1"&gt; &
iview2. Table实现默认勾选
xiaojing的博客
09-01 1万+
1、table默认勾选 实现效果： 解决方式： <Table ref="table" @on-selection-change="selectChange"></Table> <Script> xxx () { //实现默认勾选 this.$refs.table.$refs.tbody.objData[i...
Tabs初始化时如何让特定的tab处于选中状态
weixin_34402090的博客
07-15 1922
使用UPDATE方法 update param Update the specified tab panel, the param parameter contains two properties:tab: the tab panel to be updated.options: the panel options. $('#div_sysconfig').tabs...
iView单选框默认选中问题
第二庄
11-22 1万+
首先看一下iView中单选框的事例： &lt;template&gt; &lt;RadioGroup v-model="phone"&gt; &lt;Radio label="apple"&gt; &lt;Icon type="logo-apple"&gt;&lt;/Icon&gt; &lt
[iview] ivew标签页点击事件，将点击TabPane标签时对应的参数传给Tabs标签
Java学习
03-05 1万+
ivew的TabPane加@click和@click.native以及@on-click:&amp;quot;&amp;quot; 是无法触发点击事件的 而我们只能在Tabs标签上添加@on-click=“”， 但我们需要把赋值给TabPane标签的id传到后台 然后台再跟据id查询所需要的内容 我们只需要将id赋值给TabPane 标签的name值 然后在Tabs标签中使用value与其对应即可 例： 在kindOfNotic...
iview组件库modal弹窗显示滚动条
03-28
如果iview组件库的modal弹窗内容过长，会导致弹窗无法完全展示，这时可以通过设置弹窗的高度，并让内容区域出现滚动条来解决。 1. 设置弹窗的高度 可以通过设置iview组件库的Modal组件的height属性来设置弹窗的高度，例如： ``` <Modal title="标题" v-model="dialogVisible" :height="500"> <!-- 弹窗内容 --> </Modal> ``` 在上面的例子中，height属性被设置为500，表示弹窗的高度为500px。 2. 让内容区域出现滚动条 为了让内容区域出现滚动条，需要对弹窗内容进行一些设置。可以在弹窗内容的最外层加上一个div，并设置其高度和overflow属性，例如： ``` <Modal title="标题" v-model="dialogVisible" :height="500"> <div class="dialog-content"> <!-- 弹窗内容 --> </div> </Modal> <style> .dialog-content { height: 400px; /* 内容区域的高度 */ overflow: auto; /* 出现滚动条 */ } </style> ``` 在上面的例子中，div的class被设置为dialog-content，其高度被设置为400px，表示内容区域的高度为400px，同时overflow属性被设置为auto，表示当内容超出容器高度时出现滚动条。 通过以上两步设置，就可以让iview组件库的modal弹窗显示滚动条了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值