<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: {//這里是希望函數(shù)只被調(diào)用一次
                '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]) {//這里是希望函數(shù)只被調(diào)用一次
                console.log('Clicked tab name: ' + tab.props.label);
                this.clickedTabs[tab.props.name] = true;//這里是希望函數(shù)只被調(diào)用一次
                // 根據(jù)tab的名字執(zhí)行相應(yīng)的操作
                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>