element ui tabs 标签页支持展开收起修改
<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 标签页支持展开收起修改的更多相关文章
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- tabs标签页的数据缓存
一进入tabs标签页默认就将所有标签页的数据请求到,并渲染到页面上, 这样如果数据量太大的话会渲染很久, 我的需求就是点击不同的标签时再请求数据,同时对点击过的标签页数据进行缓存,下次点击时不再重新请 ...
- 踩iviewui中Tabs 标签页数据绑定坑
今天小颖要实现点击Tabs 标签页中每个标签,并动态获取当前点击的标签值. 一句话说不清楚,那就看动态图吧 小颖一开始看官网写的代码是: <template> <Tabs :valu ...
- easyui,获取tabs标签页内容,以及刷新datagrid
因为先点开tab页xxx查看表格,再点另一个tab页xxxx修改部分信息,再切换到tab页xxx,tab页xxx里的datagrid表格不会刷新,显示不了修改的信息(在此tab页按F5刷新可以解决,但 ...
- Tabs - 标签页
<div class="J_TWidget tab" data-widget-type="Tabs"style="width:宽度px; hei ...
- Jquery实现的Tabs标签页
效果图: HTML: <div class="tabs"> <ul id="tabs"> <li class="tab- ...
- vue element-ui Tabs 标签页实现【更多】功能
element-ui Tabs本身是没有更多功能的,如果在外边添加一个更多按钮,又非常不好看, 而利用API中Tabs Attributes的before-leave勾子方法可以实现这个功能, 简单P ...
- tabs(标签页的现成页面)原生js写法
直接上代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- DedeCMS的分页标签pagelist支持中英文的修改方法[转]
不得不感叹DedeCMS的强大,可定制性和扩展性太强了,就算不懂php也可以很轻松的修改源码. 今天碰到个新问题,用DedeCMS搞了个中英双语的网站,其他的都修改好了,上线之前发现分页条中英文版中都 ...
- 让PHPCms内容页支持JavaScript的修改方法
在文件..\caches\caches_model\caches_data\content_input.class.php中找到函数: function get($data,$isimport = 0 ...
随机推荐
- SOFAJRaft源码阅读-Netty时间轮算法的实践
SOFAJRaft的定时任务调度器是基于Netty来实现的,所以本文将会基于Netty时间轮算法,然后再结合SOFAJRaft源码进行分析. @Author:Akai-yuan @更新时间:2023/ ...
- 重写Object类的equals方法-Objects类的equals方法
重写Object类的equals方法 Object类的equals方法默认比较的是两个对象的地址值,没有意义所以我们学要重写equals方法,比较两个对象的属性值(name,age) 对象的属性值一样 ...
- 【分析笔记】全志 i2c-sunxi.c 控制器驱动分析
分析平台:全志 A64 内核版本:Linux 4.9 数据手册:Allwinner_A64_User_Manual_V1.1.pdf (whycan.com) 驱动框架 I2C 设备驱动 作为方案应用 ...
- 你知道CDN是干嘛的吗?
theme: cyanosis 前言 几年前,我在浏览互联网时偶然发现了一个新的电子商务网站,注意到网站上的图片加载速度不快.我刷新了页面并重试了几次.终于,十秒钟后,我能够看到带有图像的渲染网页. ...
- LeetCode_1. 两数之和
写在前面 难度:简单 原文链接:https://leetcode-cn.com/problems/two-sum/ 题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和 ...
- 顺手写的redis分布式锁
/** * 锁定一个key,***一定要手工释放锁 * * @param key * @return */ public boolean lockKey(String key) { return re ...
- 分布式机器学习:异步SGD和Hogwild!算法(Pytorch)
1 导引 我们在博客<分布式机器学习:同步并行SGD算法的实现与复杂度分析(PySpark)>和博客<分布式机器学习:模型平均MA与弹性平均EASGD(PySpark) >中介 ...
- JS 格式化时间字符串
// 格式时间字符串 formatDateTimeStr(date, type) { if (date === '' || !date) { return '' } var dateObject = ...
- 微信小程序分类菜单激活状态跟随列表滚动自动切换
这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现,组件用的是微信小程序的scroll-view 逻辑就是获取右侧盒子的节点信息,获取右侧子分类的节点信息,当子分类滑动到顶部的 ...
- 配置项目请求地址和axios以及实现token过期无痛刷新
配置请求地址:config->index.js 一个项目里通常有一个config->index.js,该文件包含了当前项目的请求地址,以及项目的版本信息. // 请求地址 const AP ...