1. 问题

当使用tab切换时,部分特殊场景需要获取当前元素的类名或者id。

2.解决思路,tab切换是绑定函数,函数会传递过去当前对象,通过当前对象获取对象属性

vue部分代码:本项目是在vue-cli下运行,因此vue的初始化函数略有差异。

 <template>
<el-tabs v-model="activeName2" @tab-click="handleClick">
<el-tab-pane class="chartsPanel" label="教学质量分布" name="first-ta"></el-tab-pane>
<el-tab-pane class="chartsPanel" label="科研荣誉分布" name="second-ta"></el-tab-pane>
</el-tabs>
</template>
<script>
//vue初始化函数, export default{} 相当于 new Vue({})
export default {
name: 'chart',
data () {
return {
activeName2: 'first-ta',
}
},
methods: {
handleClick: function (tab, event) {
console.log(event)
console.log(event.target.getAttribute('id')) //获取到当前元素的id
}
}
}
</script>

element--ui使用tab切换时如何获取当前对象的id或者其他属性的更多相关文章

  1. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  2. easyui easyui-accordion的使用和在tab切换时没有样式

    1.easyui-accordion的使用 <div id="aa" class="easyui-accordion" style="width ...

  3. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  4. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  5. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  6. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  7. 关于boostrap的TAB切换 ,如何获取?

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {    // 获取已激活的标签页的名称    var acti ...

  8. echarts在tab切换时容器宽度设置为100%,只展示100px

    在 mychart.setOption(option); 后面加上 mychart.resize(); 即可

  9. 获取json对象的id或者根据name获取id

    --用json的时候,知道id获取对应的name或者相反根据name获取id --内核代码 <script> var products=[{ID:1,Name:"a", ...

随机推荐

  1. UVa 1161 Objective: Berlin (最大流)

    题意:给定一些航班,每个航班有人数,和起始终止时间,每次转机要花半小时,问限制时间内最多能有多少人从起始城市到终点城市. 析:差不多是裸板网络流的最大流问题,把每个航班都拆成两个点,这两个点之间连接一 ...

  2. 三步升级已安装的 Android SDK 和 ADT 插件(转载)

    转载:http://www.tfan.org/update-adt-and-android-sdk-in-five-minutes/ 如何快速地把已安装的 Android SDK 及 Eclipse ...

  3. PCB Web版SI9000阻抗计算器

    在几个月前写过一遍关于: PCB SI9000阻抗计算引擎Web方式实现方法  ,最近开始参考Polar SI9000的界面,将阻抗计算器转为网页版的方式实现.   一.Web版SI9000阻抗计算器 ...

  4. node+ws模块实现websocket

    先来吐槽一下,想要找点技术文章真tm不容易,全是jb复制粘贴,还冒充原创.搜索一个ws实现websocket全是一样的.一个字都没变,我能说什么.最后想到搜索ws模块githup居然前两页没有,也是那 ...

  5. 【插件开发】—— 4 SWT编程须知

    根据前两篇博文,应该对插件开发有所了解. 前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 SWT知识介绍 之前学过Java的朋友,多少页会一些关于Swi ...

  6. visual studio中使用clrscr程序出错

    clrscr()函数的作用是“清屏”,即把标准输出设备中以前的显示记录清除,包含在头文件#include<conio.h>中,但暂时较旧的编译器中没有这个. 如果想要具有相同作用的函数,可 ...

  7. ACM_回文素数

    回文素数 Time Limit: 2000/1000ms (Java/Others) Problem Description: 131号是一个主回文,因为它是一个素数和一个回文(当向后读时,它是相同的 ...

  8. 174 Dungeon Game 地下城游戏

    一些恶魔抓住了公主(P)并将她关在了地下城的右下角.地下城是由 M x N 个房间组成的二维网格布局.我们英勇的骑士(K)最初被安置在左上角的房间里,并且必须通过地下城对抗来拯救公主.骑士具有以正整数 ...

  9. API系列一:REST和RESTful认识

    序言 最近工作的项目一直使用API,就想趁這个机会,把API的知识点进行一次梳理和总结,顺便提升一下自己对API全新的认识 Web API 是ASP.NET平台新加的一个特性,它可以简单快速地创建We ...

  10. Laravel环境搭建

    在有了初步认知后,当然就要开始在自己的电脑上搭建Laravel的开发环境了. 系统环境需求 PHP 5.3.7或者更高版本,如果没有系统没有安装PHP环境的,请到下面地址下载:http://cn2.p ...