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", ...
随机推荐
- openwrt 设置samba服务器与pc共享文件
1,安装samba36-server和luci-app-samba opkg install samba36-server luci-app-samba Openwrt的samba配置是先读取/etc ...
- Linux下 SSH远程管理服务
第1章 SSH基本概述 1.1 SSH服务协议说明 SSH 是 Secure Shell Protocol 的简写,由 IETF 网络工作小组(Network Working Group )制定 在进 ...
- [App Store Connect帮助]八、维护您的 App(4.2)查看评分与评论
您可以查看 App 的总评分或单个顾客评论.如有必要,您可以针对某条评论报告问题. [注]顾客可以为您的 iOS 和 macOS App 评分并撰写评论,但只能为 Apple TVOS App 评分. ...
- [Swift通天遁地]一、超级工具-(5)使用UIWebView(网页视图)加载本地页面并调用JavaScript(脚本)代码
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Luogu P1233 木棍加工 【贪心/LIS】
题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间为1分钟: 如果刚处理 ...
- js判断是否为ie浏览器,精确显示各个ie版本
function IETester(userAgent){ var UA = userAgent || navigator.userAgent; if(/msie/i.test(UA ...
- [hdu4035] Maze【概率dp 数学期望】
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4035 真的是一道好题,题解比较麻烦,我自己在纸上写了好大一块草稿才搞出来,不用公式编辑器的话就很难看清楚 ...
- 递推DP UVA 607 Scheduling Lectures
题目传送门 题意:教授给学生上课,有n个主题,每个主题有ti时间,上课有两个限制:1. 每个主题只能在一节课内讲完,不能分开在多节课:2. 必须按主题顺序讲,不能打乱.一节课L时间,如果提前下课了,按 ...
- swing中的线程
1. 初始化线程 初始化线程用于创建各种容器,组件并显示他们,一旦创建并显示,初始化线程的任务就结束了. 2. 事件调度线程(单线程:只有一个线程在负责事件的响应工作.) 通过事件监听的学习,我们了解 ...
- Zygote和System进程的启动过程、Android应用进程启动过程
1.基本过程 init脚本的启动Zygote Zygote进程的启动 System进程的启动 Android应用进程启动过程 2.init脚本的启动 +------------+ +-------+ ...