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. DoDataExchange的作用

    void CDlgSelectCS::DoDataExchange(CDataExchange* pDX) {     CDialog::DoDataExchange(pDX);     DDX_Te ...

  2. 在javascript中,我怎么得到下拉条顶端与当前可视的顶端高度的距离,不是和网页顶端的距离

    "滚动条顶端距离" + document.documentElement.scrollTop)

  3. poj2676 Sudoku(搜索)

    题目链接:http://poj.org/problem?id=2676 题意:9*9的方格,0代表没数字,其他代表数字,请在格子中填入1~9的数字,使得在每行,每列和每个3*3的方块中,1~9的数字每 ...

  4. bzoj 2839: 集合计数【容斥原理+组合数学】

    首先,考虑容斥,我们所要的答案是并集至少有\( k \)个数的方案数减去并集至少有\( k+1 \)个数的方案数加上并集至少有\( k \)个数的方案数-- 在n个数中选i个的方案数是\( C_{n} ...

  5. 洛谷P4344 [SHOI2015]脑洞治疗仪(珂朵莉树)

    传送门 看到区间推倒……推平就想到珂朵莉树 挖脑洞直接assign,填坑先数一遍再assign再暴力填,数数的话暴力数 //minamoto #include<iostream> #inc ...

  6. Word Cloud (词云) - Matlab

    今天要总结的是 Word Cloud 最后一个部分了,用 Matlab 来创建 word cloud.Matlab R2018b 已经提供 wordcloud 函数可以直接生成词云了. >> ...

  7. 全选Js

    <th><input type="checkbox" value="" id="checkedAll" onclick=& ...

  8. 贪心 UVALive 6832 Bit String Reordering

    题目传送门 /* 贪心:按照0或1开头,若不符合,选择后面最近的进行交换.然后选取最少的交换次数 */ #include <cstdio> #include <algorithm&g ...

  9. 题解报告:hdu 2058 The sum problem

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2058 问题描述 给定一个序列1,2,3,...... N,你的工作是计算所有可能的子序列,其子序列的总 ...

  10. hdu 6012 Lotus and Horticulture 打标记

    http://acm.hdu.edu.cn/showproblem.php?pid=6012 我们希望能够快速算出,对于每一个温度,都能够算出它在这n颗植物中,能得到多少价值. 那么,对于第i科植物, ...