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或者其他属性的更多相关文章

  1. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  2. easyui easyui-accordion的使用和在tab切换时没有样式

    1.easyui-accordion的使用 <div id="aa" class="easyui-accordion" style="width ...

  3. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  4. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  5. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  6. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  7. 关于boostrap的TAB切换 ,如何获取?

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {    // 获取已激活的标签页的名称    var acti ...

  8. echarts在tab切换时容器宽度设置为100%,只展示100px

    在 mychart.setOption(option); 后面加上 mychart.resize(); 即可

  9. 获取json对象的id或者根据name获取id

    --用json的时候,知道id获取对应的name或者相反根据name获取id --内核代码 <script> var products=[{ID:1,Name:"a", ...

随机推荐

  1. UI: 网易新闻实现

      #pragma mark-(AppDelegate.H文件)-------------------------------------------------------------------- ...

  2. SqlSugar解决SQLite访问的问题:Unable to load DLL 'SQLite.Interop.dll'

    SqlSugar用的版本是4.5.9.5,访问SQLite数据提示错误.在本机调试一时没有什么错误,把代码发布到服务器上以后刚开始运行没有问题,一段时间后报错. English Message : C ...

  3. Application 效能分析有妙招 — 使用 perf 走天下(转载)

    转载:http://tech.mozilla.com.tw/posts/1803/application-%E6%95%88%E8%83%BD%E5%88%86%E6%9E%90-%E4%BD%BF% ...

  4. 【SpringCloud构建微服务系列】Feign的使用详解

    一.简介 在微服务中,服务消费者需要请求服务生产者的接口进行消费,可以使用SpringBoot自带的RestTemplate或者HttpClient实现,但是都过于麻烦. 这时,就可以使用Feign了 ...

  5. iOS 应用打包 设备兼容性问题(Build Active Architecture Only)

    在把应用打包安装到iPod Touch上面时,设备提示不兼容,所以就有几种猜想: 1.CPU架构问题,因为我手里这个iPod Touch的CPU是A5,是32位的: 2.TARGETS里面相关的设置对 ...

  6. CAD中的相对坐标和绝对坐标

    绝对坐标就是你作图的整个界限的原点,也就是CAD系统默认的原点坐标. 相对坐标就是相对于当前的点的坐标. 这两种坐标都有,可以根据习惯和需要自己看使用哪种. 一.绝对坐标 ①笛卡尔坐标(X,Y,Z) ...

  7. 人工智能-深度学习(3)TensorFlow 实战一:手写图片识别

    http://gitbook.cn/gitchat/column/59f7e38160c9361563ebea95/topic/59f7e86d60c9361563ebeee5 wiki.jikexu ...

  8. jmeter(十二)处理Cookie与Session

    JMeter的工作原理是: JMeter可以作为Web服务器与浏览器之间的代理网关,以便捕获浏览器的请求和Web服务器的响应,这样就很容易地生成性能测试脚本, 有了性能测试脚本,JMeter就可以通过 ...

  9. 472 Concatenated Words 连接的单词

    详见:https://leetcode.com/problems/concatenated-words/description/ C++: class Solution { public: vecto ...

  10. 221 Maximal Square 最大正方形

    在一个由0和1组成的二维矩阵内,寻找只包含1的最大正方形,并返回其面积.例如,给出如下矩阵:1 0 1 0 01 0 1 1 11 1 1 1 11 0 0 1 0返回 4. 详见:https://l ...