element--ui使用tab切换时如何获取当前对象的id或者其他属性
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或者其他属性的更多相关文章
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
- easyui easyui-accordion的使用和在tab切换时没有样式
1.easyui-accordion的使用 <div id="aa" class="easyui-accordion" style="width ...
- 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式
最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...
- 关于boostrap的TAB切换 ,如何获取?
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // 获取已激活的标签页的名称 var acti ...
- echarts在tab切换时容器宽度设置为100%,只展示100px
在 mychart.setOption(option); 后面加上 mychart.resize(); 即可
- 获取json对象的id或者根据name获取id
--用json的时候,知道id获取对应的name或者相反根据name获取id --内核代码 <script> var products=[{ID:1,Name:"a", ...
随机推荐
- python运行selenium时出现的一个错误总结
1.SettingWithCopyWarning: A value is trying to be set on a copy of a slice from a DataFrame 场景:运用pan ...
- hdu 1348【凸包模板】
#include<iostream> #include<iostream> #include<algorithm> #include<cmath> us ...
- poj 3243 Clever Y && 1467: Pku3243 clever Y【扩展BSGS】
扩展BSGS的板子 对于gcd(a,p)>1的情况 即扩展BSGS 把式子变成等式的形式: \( a^x+yp=b \) 设 \( g=gcd(a,p) \) 那么两边同时除以g就会变成: \( ...
- 【POJ - 1458】Common Subsequence(动态规划)
Common Subsequence Descriptions: A subsequence of a given sequence is the given sequence with some e ...
- tableView 加载更多
在ios开中中,由于屏幕尺寸限制,如果需要显示的数据很多,需要用到分页加载. 原理:先数据放到一个table中,先显示10条,table底部有一察看更多选项,点击察看更多查看解析的剩余数据.基本上就是 ...
- Hdu 5379 Mahjong tree (dfs + 组合数)
题目链接: Hdu 5379 Mahjong tree 题目描述: 给出一个有n个节点的树,以节点1为根节点.问在满足兄弟节点连续 以及 子树包含节点连续 的条件下,有多少种编号方案给树上的n个点编号 ...
- [POJ1741] Tree【树分治 点分治】
传送门:http://poj.org/problem?id=1741 写的第一道树分治题,撒花纪念~ 对于每一对点对(i, j),它有三种情况: ① 其中一个是根节点.这种情况比较简单,直接加上就好了 ...
- 转-MySQL for Mac 安装和基本操作
一.安装mysql 1.mysql下载地址:http://dev.mysql.com/downloads/mysql/ 2.安装软件包位于硬盘映象(.dmg)文件中,必须首先双击搜索起中的图标来安装该 ...
- 对于JS == 运算的一些理解
声明:本文是摘自一篇文章,放在这只为做为一个笔记能更好学习. 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性” ...
- c# -反射 初见
反射是一个很强大的功能,不过好像有些消耗性能,大家慎重使用. 1.反射是干什么的? 通过反射,我们可与获取程序集中的原数据. 1.什么是程序集? dll.exe 这些将很多能实现具体功能的代码封装起 ...