dy-admin-manager/src/views/vipClass/vipDetail/index.vue

<template>
  <div class='m-container'>
    <h2>{{ className }}</h2>
    <div class="m-core">
      <!-- navMenu -->
      <el-tabs v-model="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="基本信息"
                     name="1">
          <vipBase v-if="activeName == 1" @getName='getName' />
        </el-tab-pane>
        <el-tab-pane label="教学记录"
                     name="2">
          <teacherRecord v-if="activeName == 2" />
        </el-tab-pane>
        <el-tab-pane label="VIP课程财务"
                     name="3">
          <fnanceInfo v-if="activeName == 3" />
        </el-tab-pane>
        <el-tab-pane label="VIP学生列表"
                     name="4">
          <vipStudentList v-if="activeName == 4" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import teacherRecord from '@/views/vipClass/vipDetail/components/teacherRecord'
import vipBase from '@/views/vipClass/vipDetail/components/vipBaseInfo'
import fnanceInfo from '@/views/vipClass/vipDetail/components/fnanceInfo'
import vipStudentList from '@/views/vipClass/vipDetail/components/vipStudentList'
export default {
  components: { teacherRecord, vipBase, fnanceInfo, vipStudentList },
  name: 'vipDetail',
  data () {
    return {
      activeName: '1',
      className: ''
    }
  },
  methods: {
    handleClick (val, event) {
      // console.log(val, event);
      this.activeName = val.name;
    },
    getName (val) {
      this.className = val;
    }
  },
  mounted () {

  },
}
</script>
<style lang="scss">
</style>