ylrz_saas_his_scrm_companyUI/src/views/member/userCourseStatic.vue

<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="数据总览" name="first"><userStaticAll  ref="userStaticAll" /></el-tab-pane>
    <el-tab-pane label="课节详情" name="second"><userCoursePeriodDetails  ref="userCoursePeriodDetails" /></el-tab-pane>
    <el-tab-pane label="转化记录" name="third"><userCourseConversionRecord  ref="userCourseConversionRecord" /></el-tab-pane>

  </el-tabs>
</template>
<script>
import userStaticAll from './userStaticAll.vue';
import userCoursePeriodDetails from './userCoursePeriodDetails.vue';
import userCourseConversionRecord from './userCourseConversionRecord.vue';

export default {
  name: "userCourseStatic",
  components: {
    userStaticAll,userCoursePeriodDetails,userCourseConversionRecord
  },
  data() {

    return {
      camp:{},
      userId:null,
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === "first"){
        setTimeout(() => {
          this.$refs.userStaticAll.getDetails(this.camp,this.userId);
        }, 1);
      }else if (tab.name === "second"){
        setTimeout(() => {
          this.$refs.userCoursePeriodDetails.getDetails(this.camp,this.userId);
        }, 1);
      }else {
        setTimeout(() => {
          this.$refs.userCourseConversionRecord.getDetails(this.userId);
        }, 1);
      }

    },

    getDetails(camp,userid) {
      this.camp = camp;
      this.userId=userid;
      this.activeName = 'first';
      // 默认加载“数据总览”接口
      this.$nextTick(() => {
        this.$refs.userStaticAll.getDetails(this.camp, this.userId);
      });

    },
  }
};
</script>