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. python运行selenium时出现的一个错误总结

    1.SettingWithCopyWarning: A value is trying to be set on a copy of a slice from a DataFrame 场景:运用pan ...

  2. hdu 1348【凸包模板】

    #include<iostream> #include<iostream> #include<algorithm> #include<cmath> us ...

  3. poj 3243 Clever Y && 1467: Pku3243 clever Y【扩展BSGS】

    扩展BSGS的板子 对于gcd(a,p)>1的情况 即扩展BSGS 把式子变成等式的形式: \( a^x+yp=b \) 设 \( g=gcd(a,p) \) 那么两边同时除以g就会变成: \( ...

  4. 【POJ - 1458】Common Subsequence(动态规划)

    Common Subsequence Descriptions: A subsequence of a given sequence is the given sequence with some e ...

  5. tableView 加载更多

    在ios开中中,由于屏幕尺寸限制,如果需要显示的数据很多,需要用到分页加载. 原理:先数据放到一个table中,先显示10条,table底部有一察看更多选项,点击察看更多查看解析的剩余数据.基本上就是 ...

  6. Hdu 5379 Mahjong tree (dfs + 组合数)

    题目链接: Hdu 5379 Mahjong tree 题目描述: 给出一个有n个节点的树,以节点1为根节点.问在满足兄弟节点连续 以及 子树包含节点连续 的条件下,有多少种编号方案给树上的n个点编号 ...

  7. [POJ1741] Tree【树分治 点分治】

    传送门:http://poj.org/problem?id=1741 写的第一道树分治题,撒花纪念~ 对于每一对点对(i, j),它有三种情况: ① 其中一个是根节点.这种情况比较简单,直接加上就好了 ...

  8. 转-MySQL for Mac 安装和基本操作

    一.安装mysql 1.mysql下载地址:http://dev.mysql.com/downloads/mysql/ 2.安装软件包位于硬盘映象(.dmg)文件中,必须首先双击搜索起中的图标来安装该 ...

  9. 对于JS == 运算的一些理解

    声明:本文是摘自一篇文章,放在这只为做为一个笔记能更好学习. 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性” ...

  10. c# -反射 初见

    反射是一个很强大的功能,不过好像有些消耗性能,大家慎重使用. 1.反射是干什么的? 通过反射,我们可与获取程序集中的原数据. 1.什么是程序集? dll.exe  这些将很多能实现具体功能的代码封装起 ...