<template>
<div class="com-resource-legend" style="">
<el-tabs type="card" v-model="activeTab" :tab-position="tabPosition" :stretch="false" @tab-click="legendClick">
<!-- 单独模块 -->
<el-tab-pane label="legend1">
<span slot="label">
<img id="cityName" src="../../../../../../public/static/nxgis/img/legend/pw.png" alt=""/>
</span>
<!-- 单独模块的内容 -->
<div class="contain">
<keep-alive>
<component :is="modelLegend"></component>
</keep-alive>
</div>
</el-tab-pane>
<!-- 公共模块第一个 commonLenged1 -->
<el-tab-pane label="legend2" name="commonLenged">
<span slot="label">
<img src="../../../../../../public/static/nxgis/img/legend/pw.png" alt="" v-show="pwpng"/>
<img src="../../../../../../public/static/nxgis/img/legend/pw1.png" alt="" v-show="pw1png"/>
</span>
<!-- 内容 -->
<div class="publicDiv public1">
<div class="publicDivP">

</div>
</el-tab-pane>

<!-- 公共模块第二个 -->
<el-tab-pane label="legend3">
<span slot="label">
<img src="../../../../../../public/static/nxgis/img/legend/mgd2.png" alt="" v-show="mgd2png"/>
<img src="../../../../../../public/static/nxgis/img/legend/mgd1.png" alt="" v-show="mgd1png"/>
</span>
<!-- 内容 -->
<div class="publicDiv public1">

</div>
</el-tab-pane>

<!-- 公共模块第三个 -->
<el-tab-pane label="legend4">
<span slot="label">
<img src="../../../../../../public/static/nxgis/img/legend/wgh.png" alt="" v-show="wghpng"/>
<img src="../../../../../../public/static/nxgis/img/legend/wgh1.png" alt="" v-show="wgh1png"/>
</span>
<!-- 内容 -->
<div class="publicDiv public1">

</div>
</el-tab-pane>

<!-- 公共模块第四个 -->
<el-tab-pane label="legend5">
        <span slot="label">
<img src="../../../../../../public/static/nxgis/img/legend/wgh.png" alt="" v-show="wghpng"/>
<img src="../../../../../../public/static/nxgis/img/legend/wgh1.png" alt="" v-show="wgh1png"/>
</span>
        <div class="publicDiv public1">

</div>
      </el-tab-pane>
</el-tabs>
</div>
</template>

data() {
return {
activeTab: 'situation1',
tabPosition: 'right', //**
checked: '',
currentLab: {
index: -1,
isActive: false
}
}
},
methods: {
//// tabs 切换点击
legendClick(tab, event) {
let self = this;
var tab_content = document.querySelectorAll(".com-resource-legend .el-tabs__content");
if (self.currentLab.index == tab.index) {
tab_content[0].style.display == 'none'|| ''? tab_content[0].style.display = 'block' : tab_content[0].style.display = 'none';
}
if (self.currentLab.index != tab.index) {
self.currentLab.index = tab.index;
tab_content[0].style.display = 'block';
}
}


element ui tabs 标签页支持展开收起修改的更多相关文章

  1. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  2. tabs标签页的数据缓存

    一进入tabs标签页默认就将所有标签页的数据请求到,并渲染到页面上, 这样如果数据量太大的话会渲染很久, 我的需求就是点击不同的标签时再请求数据,同时对点击过的标签页数据进行缓存,下次点击时不再重新请 ...

  3. 踩iviewui中Tabs 标签页数据绑定坑

    今天小颖要实现点击Tabs 标签页中每个标签,并动态获取当前点击的标签值. 一句话说不清楚,那就看动态图吧 小颖一开始看官网写的代码是: <template> <Tabs :valu ...

  4. easyui,获取tabs标签页内容,以及刷新datagrid

    因为先点开tab页xxx查看表格,再点另一个tab页xxxx修改部分信息,再切换到tab页xxx,tab页xxx里的datagrid表格不会刷新,显示不了修改的信息(在此tab页按F5刷新可以解决,但 ...

  5. Tabs - 标签页

    <div class="J_TWidget tab" data-widget-type="Tabs"style="width:宽度px; hei ...

  6. Jquery实现的Tabs标签页

    效果图: HTML: <div class="tabs"> <ul id="tabs"> <li class="tab- ...

  7. vue element-ui Tabs 标签页实现【更多】功能

    element-ui Tabs本身是没有更多功能的,如果在外边添加一个更多按钮,又非常不好看, 而利用API中Tabs Attributes的before-leave勾子方法可以实现这个功能, 简单P ...

  8. tabs(标签页的现成页面)原生js写法

    直接上代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  9. DedeCMS的分页标签pagelist支持中英文的修改方法[转]

    不得不感叹DedeCMS的强大,可定制性和扩展性太强了,就算不懂php也可以很轻松的修改源码. 今天碰到个新问题,用DedeCMS搞了个中英双语的网站,其他的都修改好了,上线之前发现分页条中英文版中都 ...

  10. 让PHPCms内容页支持JavaScript的修改方法

    在文件..\caches\caches_model\caches_data\content_input.class.php中找到函数: function get($data,$isimport = 0 ...

随机推荐

  1. 《HelloGitHub》第 82 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  2. 如何在 C# 项目中链接一个文件夹下的所有文件

    在 C# 项目中通过链接方式引入文件可以让我们在项目中使用这些文件中的代码.常见的比如链接 AssemblyInfo.cs 文件,这样我们就可以在项目中使用这个文件中的版本号等信息.但是如果我们想要链 ...

  3. 文盘Rust -- rust 连接云上数仓 starwift

    作者:京东云 贾世闻 最近想看看 rust 如何集成 clickhouse,又犯了好吃懒做的心理(不想自己建环境),刚好京东云发布了兼容ck 的云原生数仓 Starwfit,于是搞了个实例折腾一番. ...

  4. 12月2日内容总结——边框属性,display属性,css盒子模型,浮动、溢出、定位、z-index属性和建议博客页面搭建

    目录 一.边框 边框简介 border-style--边框样式 border-width--边框宽度 border-color--边框颜色 二.display属性 三.CSS盒子模型 概念 margi ...

  5. Django-Ajax、form组件

    1.Ajax 1.AJAX:不是新的编程语言,而是一种使用现有标准的新方法,我们目前学习的是jQuery版本.特点:异步提交,局部刷新. 2.AJAX 最大的优点是在不重新加载整个页面的情况下,可以与 ...

  6. SpringBoot 2.x 在Tomcat8上无法运行,报无法访问错误

    非法访问:此Web应用程序实例已停止.无法加载[].为了调试以及终止导致非法访问的 这仅是我的一个Filter重写的时候没有重写他的其他两个方法,导致我在Tomcat8上不能运行,但在Tomcat9上 ...

  7. dotnet 8 preview 1 即将发布

    .Net 8 preview 1 即将到来,让我们来提前看看都要发布什么吧. .Net 8 preview 1 即将到来 .NET 8 的第一个预览版将在几周内发布,微软的 David Ortinau ...

  8. 交叉熵损失CrossEntropyLoss

    在各种深度学习框架中,我们最常用的损失函数就是交叉熵,熵是用来描述一个系统的混乱程度,通过交叉熵我们就能够确定预测数据与真实数据的相近程度.交叉熵越小,表示数据越接近真实样本. 1 分类任务的损失计算 ...

  9. LOJ 数列分块入门 6

    \(\text{Solution}\) 涉及到插入,分块需要动态维护块内的元素及相对位置 于是妙用 \(\text{vector}\) 学到了 \(insert\) 操作,在某个迭代器前插入元素 这样 ...

  10. LG P4146 序列终结者

    \(\text{Problem}\) 支持区间加区间翻转区间最大值 \(\text{Solution}\) \(\text{FHQ-Treap}\) 两个标记加与翻转 然后维护区间最大值 \(\tex ...