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. (转)ASP.NET 4.0 尚未在 Web 服务器上注册

    安装vs2010的时候忘记先安装IIS7了,导致出现了这个问题.经过网络查询发现解决方法如下: 运行:cmd命令,进入命令管理器, 输入:cd C:\\WINDOWS\\Microsoft.NET\\ ...

  2. CodeForces 721B Passwords (水题)

    题意:给定 n 个密码,你要按长度不递减的顺序进行尝试,问你最多和最少试多少次可能找出密码,每尝试 k 次错误的,就要等5秒. 析:我们只要把长度全都统计下来,然后从1开始去找目标长度,最少的就是正好 ...

  3. bzoj 4481: [Jsoi2015]非诚勿扰【期望+树状数组】

    首先很容易计算对于一个如意郎君列表里有x个男性的女性,编号排第i位的男性被选的概率是 \[ p*(1-p)^{i-1}+p*(1-p)^{i-1+n}+p*(1-p)^{i-1+n}+- \] \[ ...

  4. 只需3步,即可将你的Chromium Edge 浏览器设置成中文

    最近,Chromium Edge 浏览器推出了添加语言包的功能,于是我们可以轻松将其界面设置成中文的. 第1步: 升级浏览器到最新版 在Chromium Edge 浏览器的地址栏中输入: edge:/ ...

  5. HTML中a标签自动识别电话、邮箱

    HTML中a标签自动识别电话.邮箱 联系电话:<a href="tel:010-88888888">010-88888888</a><br> 联 ...

  6. 数据结构 - 静态顺序线性表的实行(C语言)

    数据结构 - 静态顺序线性表的实行(C语言) 1 获取元素操作 对于线性表的顺序存储结构来说,如果我们要实现GetElem操作,即将线性表L中的第i个位置元素值返回,其实是非常简单的. 只要i的数值在 ...

  7. [SPOJ375]Qtree

    Description You are given a tree (an acyclic undirected connected graph) with N nodes, and edges num ...

  8. ACM_平面、空间分割问题(递推dp)

    折线分割平面 Time Limit: 2000/1000ms (Java/Others) Problem Description: 我们看到过很多直线分割平面的题目,今天的这个题目稍微有些变化,我们要 ...

  9. egrep命令的实现 分类: 编译原理 2014-06-01 23:41 329人阅读 评论(0) 收藏

    本程序实现了egrep命令,首先将正则表达式转换为NFA,并实现模拟NFA的算法. 本程序使用flex实现词法分析,bison实现语法分析 若给定的一行字符串中存在一个字串能被该NFA接受,则输出整行 ...

  10. Windowsforms 中对文件操作

    文件及文件夹操作: 引用命名空间:using system .IO; 1.File类: 创建:File.Create(路径);——返回FileStream FileStream fs = File.C ...