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. 转3xian之所在 (一位ACM大牛的博文)

    3xian的经历和见解...我深思... 最后一天,漫天飘起了雪花,假装欢送我离去. 这次WF之战不太顺利,早期的C题大概花了1秒钟构思,然而由于输出格式多了一个空格直到两个半小时才逃脱Wrong A ...

  2. MFC project for a non-Unicode character set is deprecated

    error MSB8031: Building an MFC project for a non-Unicode character set is deprecated. You must chang ...

  3. 2 socket相关概念

    嘿嘿 这只是学习过程中的笔记积累,百度也是一代吧,大神就勿喷勒..... 1 为什么把网络编程接口叫做套接字 socket字面意思为插座 插孔,让人联想到电话,这种简单的设备给人类太大的方便 2 根据 ...

  4. 设计模式-COMMOND PATTERN (ACTIVE OBJECT PATTERN是一种特殊的COMMOND PATTERN)

    复用控制逻辑. 理解方式:Controller 获取到Light TeleVision Computer中的一个的对像,通过Icommond接口作用于它. ACTIVE OBJECT模式: class ...

  5. bzoj 1567: [JSOI2008]Blue Mary的战役地图【二分+hash】

    二维哈希+二分 说是二维,其实就是先把列hash了,然后再用列的hash值hash行,这样可以O(n)的计算一个正方形的hash值,然后二分边长,枚举左上角点的坐标然后hash判断即可 只要base选 ...

  6. bzoj3265: 志愿者招募加强版(线性规划+单纯形法)

    传送门 鉴于志愿者招募那题我是用网络流写的所以这里还是写一下单纯形好了-- 就是要我们求这么个线性规划(\(d_{ij}\)表示第\(i\)种志愿者在第\(j\)天能不能服务,\(x_i\)表示第\( ...

  7. nc的基本用法

    nc(netcat) 被誉为网络安全界的‘瑞士军刀’,可以用于完成几乎涉及TCP.UDP或者Unix域套接字的任何事.它可以打开TCP连接,发送UDP报文,在任意的TCP和UDP端口监听,进行端口扫描 ...

  8. 【数据结构】27、红黑树,节点插入,修复平衡操作总结(针对jdk8中hashmap冲突过多链表转红黑树)

    二叉树节点插入 0.如果只有一个节点,那么就直接作为根,涂黑,如果父为黑,或者祖父为空,那么不做操作 1.叔叔节点不为空且为红 那么就修改父,叔叔,祖父节点颜色,最后把当前节点设置为祖父节点,在进行平 ...

  9. html 解决空格显示问题

    前端开发者都知道,在html中手动输入多个空格或者是回车,在页面解析的时候都被解析成一个空白显示,但有时候的需求要求显示多个空格,这个问题怎么解决呢?根绝我个人的经验,目前找到了以下集中解决办法: 1 ...

  10. c语言程序设计案例教程(第2版)笔记(二)—函数、递归

    零散知识点 模块化:将一个问题分解成若干个子问题的过程成为模块化. 模块化的优点:不但可以将一个复杂的问题分解成几个相对简单的问题:还可以提高程序代码的重用性. 函数:函数是构成C程序的基本单位.函数 ...