ElementUI中el-tabs事件绑定的具体使用

 更新时间:2022年04月15日 10:09:29   作者:雪梅零落  
本文主要介绍了ElementUI中el-tabs事件绑定的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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>

 到此这篇关于ElementUI中el-tabs事件绑定的具体使用的文章就介绍到这了,更多相关ElementUI el-tabs事件绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue.js学习笔记之绑定style样式和class列表

    vue.js学习笔记之绑定style样式和class列表

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。这篇文章主要介绍了vue.js绑定style和class的相关资料,需要的朋友可以参考下
    2016-10-10
  • vue3 非父子组件通信详解

    vue3 非父子组件通信详解

    本篇文章主要介绍了详解Vue 非父子组件通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10
  • vue3中引入class类的写法代码示例

    vue3中引入class类的写法代码示例

    最近一直在做vue项目,从网上搜索到的资料不太多,这篇文章主要给大家介绍了关于vue3中引入class类的写法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • Vue 监听视频播放时长的实例代码

    Vue 监听视频播放时长的实例代码

    本文介绍了如何通过源码实现对视频实时时长、播放时长和暂停时长的监听,详细阐述了相关技术的应用方法,帮助开发者更好地掌握视频监控技术,提高用户体验
    2024-10-10
  • 教你三分钟掌握Vue过滤器filters及时间戳转换

    教你三分钟掌握Vue过滤器filters及时间戳转换

    这篇文章教你三分钟掌握Vue过滤器filters及时间戳转换,本文将结合时间戳转换的例子带你快速了解filters的用法,需要的朋友可以参考下
    2023-03-03
  • 如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库

    如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库

    构建工具使用vue3推荐的vite,下面这篇文章主要给大家介绍了关于如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • VUE3 Vite打包后动态图片资源不显示问题解决方法

    VUE3 Vite打包后动态图片资源不显示问题解决方法

    这篇文章主要给大家介绍了关于VUE3 Vite打包后动态图片资源不显示问题的解决方法,可能是因为在部署后的服务器环境中对中文文件名的支持不完善,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 带你了解前端的几种包管理器(npm/pnpm等)

    带你了解前端的几种包管理器(npm/pnpm等)

    随着前端工程化的应用越来越广,插件和包的管理也逐渐衍生出很多的管理器,常见的几种包管理器如:npm、cnpm、yarn、pnpm,那你知道这些管理器之间有哪些区别吗?我们一起来逐个认识下它们
    2023-04-04
  • Vue2 轮播图slide组件实例代码

    Vue2 轮播图slide组件实例代码

    这篇文章主要介绍了Vue2 轮播图slide组件实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue封装Animate.css动画库的使用方式

    vue封装Animate.css动画库的使用方式

    这篇文章主要介绍了vue封装Animate.css动画库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04

最新评论