<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. SOFAJRaft源码阅读-Netty时间轮算法的实践

    SOFAJRaft的定时任务调度器是基于Netty来实现的,所以本文将会基于Netty时间轮算法,然后再结合SOFAJRaft源码进行分析. @Author:Akai-yuan @更新时间:2023/ ...

  2. 重写Object类的equals方法-Objects类的equals方法

    重写Object类的equals方法 Object类的equals方法默认比较的是两个对象的地址值,没有意义所以我们学要重写equals方法,比较两个对象的属性值(name,age) 对象的属性值一样 ...

  3. 【分析笔记】全志 i2c-sunxi.c 控制器驱动分析

    分析平台:全志 A64 内核版本:Linux 4.9 数据手册:Allwinner_A64_User_Manual_V1.1.pdf (whycan.com) 驱动框架 I2C 设备驱动 作为方案应用 ...

  4. 你知道CDN是干嘛的吗?

    theme: cyanosis 前言 几年前,我在浏览互联网时偶然发现了一个新的电子商务网站,注意到网站上的图片加载速度不快.我刷新了页面并重试了几次.终于,十秒钟后,我能够看到带有图像的渲染网页. ...

  5. LeetCode_1. 两数之和

    写在前面 难度:简单 原文链接:https://leetcode-cn.com/problems/two-sum/ 题目  给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和 ...

  6. 顺手写的redis分布式锁

    /** * 锁定一个key,***一定要手工释放锁 * * @param key * @return */ public boolean lockKey(String key) { return re ...

  7. 分布式机器学习:异步SGD和Hogwild!算法(Pytorch)

    1 导引 我们在博客<分布式机器学习:同步并行SGD算法的实现与复杂度分析(PySpark)>和博客<分布式机器学习:模型平均MA与弹性平均EASGD(PySpark) >中介 ...

  8. JS 格式化时间字符串

    // 格式时间字符串 formatDateTimeStr(date, type) { if (date === '' || !date) { return '' } var dateObject = ...

  9. 微信小程序分类菜单激活状态跟随列表滚动自动切换

    这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现,组件用的是微信小程序的scroll-view 逻辑就是获取右侧盒子的节点信息,获取右侧子分类的节点信息,当子分类滑动到顶部的 ...

  10. 配置项目请求地址和axios以及实现token过期无痛刷新

    配置请求地址:config->index.js 一个项目里通常有一个config->index.js,该文件包含了当前项目的请求地址,以及项目的版本信息. // 请求地址 const AP ...