Vue.js官方:有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event
把它传入方法。
https://cn.vuejs.org/v2/guide/events.html
template:
defaultActiveKey是默认选中的tab-pane,@tabClick是每个标签页被点击时候触发的事件。
这里绑定的dom元素其实就是标签页了,下面在方法中打印我们传入的$event就是activeKey。
<a-tabs
defaultActiveKey="1"
@tabClick="getTabsKey($event)"
size="large"
:tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
>
<a-tab-pane
loading="true"
tab="激活绑定设备数"
key="1"
>
内容1
</a-tab-pane>
<a-tab-pane
tab="在线用户(设备)数"
key="2"
>
内容2
</a-tab-pane>
<a-tab-pane
tab="生理指标数据数"
key="3"
>
内容3
</a-tab-pane>
<a-tab-pane
tab="消息数"
key="4"
>
内容4
</a-tab-pane>
</a-tabs>
script
methods: {
// 获取tab页的key值
getTabsKey(event) {
if(event != null){
this.tabsActiveKey = event;
}
console.log('TabsKey =>',this.tabsActiveKey)
},
}
之前需要获取标签页的值进行一些判断,记录一下。
其他相关博客