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", ...
随机推荐
- VScode相关
这就是我想要的 VSCode 插件! VS Code 快捷键(中英文对照版) visual studio code 配置vue开发环境 vscode 这样的注释怎么生成? 能让你开发效率翻倍的 VSC ...
- ubuntu安装IDEA和PYCHARM
IDEA和PYCHAR的下载以及安装步骤一样. 1.下载免费学习版本(Community) 2.解压文件到opt文件夹下面sudo tar -zxvf xxx -C /opt 3.进入解压之后的bin ...
- Ruby Proc类
Proc类 生成 Proc.new() {...} proc {...} 注,代码块参数带用 |..., *array| 获得后续参数的数组 lamda {...} call呼出时会 ...
- 不让浏览器缓存input的值
方法一: 在不想使用缓存的input中添加 autocomplete="off"eg: <input type="text" autocomplete=& ...
- 安装配置Eclipse Python开发插件PyDev
一.PyDev安装的版本要求 PyDev是支持在Eclipse中进行Python程序开发的插件,Pydev官方的说法是需要安装 java 8 and Eclipse 4.6 (Neon),当然,你也可 ...
- 洛谷P2384 最短路(dijkstra解法)
题目背景 狗哥做烂了最短路,突然机智的考了Bosh一道,没想到把Bosh考住了...你能帮Bosh解决吗? 他会给你100000000000000000000000000000000000%10金币w ...
- layer 确认或取消后跳转
layer.open({ content: "下单成功" , btn: ['确定','取消'], style: 'width:80%', yes: function(index, ...
- java-异常简介
1.简介 ############################################################### ############################### ...
- [CF997E] Good SubSegment
Description Transmission Gate 给你一个长度为n的排列P,定义一段子区间是好的,当且仅当这个子区间内的值构成了连续的一段.例如对于排列\(\{1,3,2\}\),\([1, ...
- bryce1010的图像处理课程设计
一.要求 完成课程教学中的大部分图像处理功能 二.平台 Qt c++ windows或者linux下 三.思路收集 1.QPixmap类 (一)QPixmap和QImage的区别 QPixmap是专门 ...