目录

• 介绍
• 代码实现

介绍

el-tab本身的功能是点击之后切换不同页,但是我希望点击不同标签就触发不同页

代码实现

<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="User" name="User">User</el-tab-pane>
    <el-tab-pane label="Config" name="Config">Config</el-tab-pane>
  </el-tabs>
</template>


<script>
export default{
    data() {
        return {
            clickedTabs: {//这里是希望函数只被调用一次
                'User': false,
                'Config': false,
            },
         }
    },
    methods: {
        function1(){console.log('function1 was called')},
        function2(){console.log('function2 was called')},
        handleClick(tab, event) {
            if (!this.clickedTabs[tab.props.name]) {//这里是希望函数只被调用一次
                console.log('Clicked tab name: ' + tab.props.label);
                this.clickedTabs[tab.props.name] = true;//这里是希望函数只被调用一次
                // 根据tab的名字执行相应的操作
                switch (tab.props.name) {
                   case "User":
                        console.log('function1 BEGIN');
                        this.function1();
                        break;
                   case "Config":
                        console.log('function2 BEGIN');
                        this.function2();
                        break;
                }
            } 
            else {
                console.log(tab.props.name + ' tab was already clicked.');
            }
        },
    }
}
</script>

handleClick里面通过if来使得点击标签调用函数只被调用一次,如果不需要这个操作可以把相关代码注释掉,只留下switch函数。

到此这篇关于vue中el-tab如何点击不同标签触发不同函数的实现的文章就介绍到这了,更多相关vue el-tab点击标签触发内容请搜索代码部落以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码部落!