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", ...
随机推荐
- UVa 1161 Objective: Berlin (最大流)
题意:给定一些航班,每个航班有人数,和起始终止时间,每次转机要花半小时,问限制时间内最多能有多少人从起始城市到终点城市. 析:差不多是裸板网络流的最大流问题,把每个航班都拆成两个点,这两个点之间连接一 ...
- 三步升级已安装的 Android SDK 和 ADT 插件(转载)
转载:http://www.tfan.org/update-adt-and-android-sdk-in-five-minutes/ 如何快速地把已安装的 Android SDK 及 Eclipse ...
- PCB Web版SI9000阻抗计算器
在几个月前写过一遍关于: PCB SI9000阻抗计算引擎Web方式实现方法 ,最近开始参考Polar SI9000的界面,将阻抗计算器转为网页版的方式实现. 一.Web版SI9000阻抗计算器 ...
- node+ws模块实现websocket
先来吐槽一下,想要找点技术文章真tm不容易,全是jb复制粘贴,还冒充原创.搜索一个ws实现websocket全是一样的.一个字都没变,我能说什么.最后想到搜索ws模块githup居然前两页没有,也是那 ...
- 【插件开发】—— 4 SWT编程须知
根据前两篇博文,应该对插件开发有所了解. 前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 SWT知识介绍 之前学过Java的朋友,多少页会一些关于Swi ...
- visual studio中使用clrscr程序出错
clrscr()函数的作用是“清屏”,即把标准输出设备中以前的显示记录清除,包含在头文件#include<conio.h>中,但暂时较旧的编译器中没有这个. 如果想要具有相同作用的函数,可 ...
- ACM_回文素数
回文素数 Time Limit: 2000/1000ms (Java/Others) Problem Description: 131号是一个主回文,因为它是一个素数和一个回文(当向后读时,它是相同的 ...
- 174 Dungeon Game 地下城游戏
一些恶魔抓住了公主(P)并将她关在了地下城的右下角.地下城是由 M x N 个房间组成的二维网格布局.我们英勇的骑士(K)最初被安置在左上角的房间里,并且必须通过地下城对抗来拯救公主.骑士具有以正整数 ...
- API系列一:REST和RESTful认识
序言 最近工作的项目一直使用API,就想趁這个机会,把API的知识点进行一次梳理和总结,顺便提升一下自己对API全新的认识 Web API 是ASP.NET平台新加的一个特性,它可以简单快速地创建We ...
- Laravel环境搭建
在有了初步认知后,当然就要开始在自己的电脑上搭建Laravel的开发环境了. 系统环境需求 PHP 5.3.7或者更高版本,如果没有系统没有安装PHP环境的,请到下面地址下载:http://cn2.p ...