<template lang="">
  <div>


    <el-tabs
              v-model="activeName"
          
              @tab-click="handleClick"
            >
              <el-tab-pane label="成员" name="first"></el-tab-pane>
              <el-tab-pane label="部门" name="second"></el-tab-pane>
              <el-tab-pane label="已离职成员" name="third"></el-tab-pane>
            </el-tabs>

<Department v-if="activeName==='second'"></Department>
<User v-if="activeName==='first'"></User>
<Leave v-if="activeName==='third'"></Leave>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import Department from "@/components/orgChart/department.vue";
import Leave from "@/components/orgChart/leaveUser.vue";
import User from "@/components/orgChart/memberInfo.vue";

const activeName = ref('first')
</script>
<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap:after) {
  height: 1px!important;
}
:deep(.el-tabs__item) {
  font-weight: normal!important;
  font-size: 16px!important;
color: #2A2B31!important;
}
  
</style>
