dy-admin-manager/src/views/journal/index.vue

<template>
  <div class="m-container">
    <h2>系统日志 <div class="squrt"></div>
    </h2>
    <div class="m-core">
      <el-tabs type="border-card"
               v-model="activeIndex" @tab-click="handleClick">
        <el-tab-pane label="系统通知"
                     name='0'>
          <item v-if="activeStatus[0]" />
        </el-tab-pane>
        <el-tab-pane label="学员申诉"
                     name='1'>
          <studentComplain v-if="activeStatus[1]" />
        </el-tab-pane>
        <el-tab-pane label="退团退课"
                     name='2'>
          <musicGroup v-if="activeStatus[2]" />
        </el-tab-pane>
        <el-tab-pane label="请假处理"
                     name='3'>
          <leaveOperation v-if="activeStatus[3]" />
        </el-tab-pane>
        <el-tab-pane label="VIP申请审核"
                     name='4'>
          <vipApply v-if="activeStatus[4]" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import item from './journalItem'
import studentComplain from './studentComplain'
import musicGroup from './musicGroup'
import leaveOperation from './leaveOperation'
import vipApply from './vipApply'
export default {
  components: {
    item, studentComplain, musicGroup, leaveOperation, vipApply
  },
  data () {
    return {
      activeIndex: '0',
      activeStatus: [true, false, false, false, false]
    }
  },
  methods: {
    handleClick (val) {
      this.activeIndex = val.name
      this.activeStatus[val.name] = true
    }
  }
}
</script>
<style lang="scss" scoped>
</style>