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的for...in...if...语句
Python中,for...[if]...语句一种简洁的构建List的方法,从for给定的List中选择出满足if条件的元素组成新的List,其中if是可以省略的.下面举几个简单的例子进行说明. &g ...
- WEB开发框架系列教程 (二)页面功能开发(1)
上一节一起创建TEST项目的完整的解决方案 接下来面临的是一个个具体功能页面开发了 在进行开发之前需要对接下来的页面进行分析 可以这么说任何一个项目中都有很多非常基础类的数据维护功能 我们把这类数据归 ...
- HDU 5916 Harmonic Value Description (构造)
题意:给你 n 和 m,求一个1-n的排列,使得∑gcd(Ai,Ai+1) 恰为第 m 小. 析:可以想到最小的就是相邻都互质,然后依次,第 m 小就可以有一个是gcd为 k,然后其他的为1喽. 那 ...
- 51nod 1122 机器人走方格 V4 【矩阵快速幂】
首先建立矩阵,给每个格子编号,然后在4*4的格子中把能一步走到的格子置为1,然后乘n次即可,这里要用到矩阵快速幂 #include<iostream> #include<cstdio ...
- mysql 安装命令
mysqld install MySQL --defaults-file="D:\worksoft\mysql-5.7.17-winx64\my-default.ini" D:\w ...
- typedef struct和struct 的区别 用途
刚刚想到的,我们在用结构体的时候会遇到'->'和'.',这是什么情况呢? 不能混用的(c和c++不同语言对它们没有影响) 我说的不能混用的意思是'.'用于结构体指针的指向......而'-& ...
- AutoCAD2012启动错误 1308 源文件未找到
启动AutoCAD2012时,弹出错误1308,如图所示: 是何原因? 对CAD的运行有何影响?
- 【react native】rn踩坑实践——从输入框“们”开始
因为团队技术栈变更为react native,所以开始写起了rn的代码,虽然rn与react份数同源,但是由于有很多native有关的交互和变动,实际使用还是碰到蛮多问题的,于是便有了这个系列,本来第 ...
- Hdu 5352 MZL's City (多重匹配)
题目链接: Hdu 5352 MZL's City 题目描述: 有n各节点,m个操作.刚开始的时候节点都是相互独立的,一共有三种操作: 1:把所有和x在一个连通块内的未重建过的点全部重建. 2:建立一 ...
- _bzoj1031 [JSOI2007]字符加密Cipher【后缀数组】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1031 保存后缀数组模版. 其实如果数据范围小一点,或者空间限制再大一点,或者甚至只要字母表再 ...