vue + iview页面Modal中内嵌Tabs,每次打开的时候Modal时默认选中Tabs的第一项
文档中说激活面板的name用value,页面第一次加载的时候可以,放在modal里就不好使了,每次打开的时候,当前激活的tab总显示上一次离开时的界面。
·
文档中说激活面板的name用value,页面第一次加载的时候可以,放在modal里就不好使了,每次打开的时候,当前激活的tab总显示上一次离开时的界面。
真正能用的是 this.$refs.tabs.activeKey = 'name1' ,此方法也可以动态设置Tabs页面。
下面看一下代码:
<Modal
title="监控信息"
width="1260"
v-model="isShowCdElement"
class-name="vertical-center-modal" :scrollable="true" :closable="false" mask="true" :mask-closable="false">
<div class="card-tabs-element" ref="element" style="overflow-y: auto;">
<Tabs ref="tabs" type="card" @on-click="handleTabClick">
<TabPane :ref="'tab-'+item.id" :label="'组号'+item.id" :name="'tab'+item.id" context-menu v-for="(item,index) in tabsNum" :disabled ="item.status">
<Table :columns="elementColumns" :data="elementList" :loading="elementLoading"></Table>
<Page
:total="elementTotal"
:page-size="elementPageSize"
:current="elementPageNum"
show-elevator show-sizer show-total
@on-change="getElements"
@on-page-size-change="handleElementChangeSize"></Page>
</TabPane>
<template slot="contextMenu">
</template>
</Tabs>
</div>
<div slot="footer">
<Button type="primary" @click="modalCdElementSubmit" :disabled="elementSubmitShow">确认</Button>
<Button type="primary" @click="modalCdElementCancel" :disabled="elementCancelShow">取消</Button>
</div>
</Modal>
我这个里面放的是动态tab,tab个数是不固定的,那么每次请求的时候,需要初始化一下原来的值:
在data里面定义默认初始值,1个tab
tabsNum: [{id:1,status:false}],
打开弹框的时候,当前激活的tab设置成第一个:
//每次打开的时候,设置激活的tab是第一个
this.$refs.tabs.activeKey = 'tab1'
每次在关闭弹框的时候,把这个tabNum设置成初始值。
这样每次弹框打开的时候,当前激活的tab就是默认的第一个了,而不是一次离开时的界面
更多推荐
已为社区贡献5条内容
所有评论(0)