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", ...
随机推荐
- hdu2089(数位DP 递推形式)
不要62 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- hdu 3507(DP+斜率优化)
Print Article Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)To ...
- get与post提交方式区别?
1.get <!--表单数据作为HTTP GET请求发送给action 规定的URL,并将数据附加在URL之后,由客户端直接发送给服务器.表单数据不能太长,也不能含有非ASCII码的字符--&g ...
- Gym 100512B Betting Fast (题意+概率)
题意:你开始有 s 元钱,然后你要在 t 场内赚到 n 元,每次赢的概率是 p,并且要越快越好. 析:当时没注意这个条件,要越快越好,然后写概率dp,怎么看也不像是对.其实是每次赌 min(s, n- ...
- ssi,服务器端包含,<include file="">
一.什么是SSI ssi,全称Server Side Include,中文名,服务器端包含. SSI (Server Side Includes)是HTML页面中的指令,在页面被提供时由服务器进行运算 ...
- Hibernate对集合属性的操作---基础学习
1:Set集合属性操作 1).Hibernate3以后支持大部分重要的JDK集合接口映射,Set集合接口的配置: >在xxx.hbm.xml文件中使用<set>标签 2).< ...
- bzoj 4825: [Hnoi2017]单旋【dfs序+线段树+hash】
这个代码已经不是写丑那么简单了--脑子浆糊感觉np++分分钟想暴起打死我--就这还一遍A过了-- 先都读进来hash一下,因为是平衡树所以dfs序直接按照点值来就好 对于每个操作: 1:set维护已插 ...
- 第一篇(eclipse中的单词)
launcher 启动栏,启动器 select a directory as workspace. 选择一个目录作为工作区 directory 目录 workspace 工作空间,工作区 Eclips ...
- 数据结构之splay树
https://www.bilibili.com/video/av19879546 https://blog.csdn.net/u014634338/article/details/42465089 ...
- 加密解密(4)SSL协议及HTTPS握手过程
SSL协议 简介 SSL (Secure Sockets Layer 安全套接层)是一个安全协议,它提供使用 TCP/IP 的通信应用程序间的隐私与完整性.因特网的 超文本传输协议 (HTTP)使用 ...