<template>
 <div class="global">
    <div class="mainContainer">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="UserManagement"></el-tab-pane>
      <el-tab-pane label="部门管理" name="DepartmentManagement"></el-tab-pane>
      <el-tab-pane label="角色管理" name="RoleManagement"></el-tab-pane>
      <el-tab-pane label="审批人管理" name="ApproverManagement"></el-tab-pane>
    </el-tabs>
    <div id="main">
    <router-view />
    </div>
    </div>
    </div>
 
</template>
<script>
 export default {
  name:"UserManagementTabs",
  data(){
    return{
      activeName: 'UserManagement'
    }
  },
  mounted()
  {
    this.activeName = this.$route.name;
  },
  methods: {
     handleClick(tab, event) {
        this.$router.push({
        name: tab.name
      })
      }
  },
}
</script>
<style lang="scss" scoped>
// .tab{
//   min-width:1160px;
 
// }


// #main{
//     height:calc(100% - 55px);
//     display:flex;
//     padding:0 10px;
// }


 

</style>