ElementUI中el-tabs事件绑定的具体使用
时间:2022-12-20 10:11:50|栏目:vue|点击: 次
tabs组件的属性
tabs的属性
tabs的事件
tab-pane的属性
标签代码
<el-tabs v-model="activeName"> <el-tab-pane name="0" label="标签1"></el-tab-pane> <el-tab-pane name="1" label="标签1"></el-tab-pane> <el-tab-pane name="2" label="标签1"></el-tab-pane> </el-tabs>
data初始化‘activeName’的值
data() { return { activeName: '0', } }
用watch监听‘activeName’的变化,从而响应不同的事件
watch : { 'activeName':function(val) { //监听切换状态-计划单 let urlStr = '/index/test?tabid=' + val; this.$router.push(urlStr); // 注释,根据val的不同,跳转到不同 }, }
在create获取URL参数
created() { if(this.$route.query.tabid) { this.activeName = this.$route.query.tabid; }else{ this.activeName = 0; } },
补充: 可直接运用tab-click绑定事件
<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeName: 'second' }; }, methods: { handleClick(tab, event) { console.log(tab, event); if(tab.name == 'second'){ // 触发‘配置管理'事件 this.second(); }else{ // 触发‘用户管理'事件 this.first(); } }, /** * 触发‘用户管理'事件 */ first(){ console.log('我是用户管理'); }, /** * 触发‘配置管理'事件 */ second(){ console.log('我是配置管理'); } } }; </script>
栏 目:vue
下一篇:vue实现监控视频直播的示例代码
本文标题:ElementUI中el-tabs事件绑定的具体使用
本文地址:http://www.codeinn.net/misctech/221781.html