File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="user-wrap">
<div class="content-box">
<div class="title-wrap">
<h2 class="main-title">회원관리</h2>
</div>
<div class="content-wrap">
<ul class="tab-menu">
<li v-for="(tab, index) in tabMenu" :key="index">
<a @click="currentTab = index" :class="{ active: currentTab === index }">{{ tab }}</a>
</li>
</ul>
<div class="tab-content">
<div v-show="currentTab == 0">
<table>
<thead>
<tr>
<th>아이디</th>
<th>기업명</th>
<th>담당자명</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in user1" :key="index">
<td>{{ user.id }}</td>
<td>{{ user.company }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
<div v-show="currentTab == 1">
<table>
<thead>
<tr>
<th>아이디</th>
<th>기업명</th>
<th>담당자명</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in user2" :key="index">
<td>{{ user.id }}</td>
<td>{{ user.company }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
<div v-show="currentTab == 2">
<table>
<thead>
<tr>
<th>아이디</th>
<th>기업명</th>
<th>담당자명</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in user3" :key="index">
<td>{{ user.id }}</td>
<td>{{ user.company }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
<div class="btn-wrap">
<button class="blue-btn">등록</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentTab: 0,
tabMenu: ['일반회원', '기관회원', '관리자'],
user1:[
{id:"test1",company:"test1C",name:"user1",email:"test1@abc.com"},
{id:"teste2",company:"test2C",name:"user2",email:"test2@abc.com"},
{id:"test3",company:"test3C",name:"user3",email:"test3@abc.com"},
],
user2:[
{id:"test1",company:"test1C",name:"user1",email:"test1@abc.com"},
{id:"teste2",company:"test2C",name:"user2",email:"test2@abc.com"},
{id:"test3",company:"test3C",name:"user3",email:"test3@abc.com"},
],
user3:[
{id:"test1",company:"test1C",name:"user1",email:"test1@abc.com"},
{id:"teste2",company:"test2C",name:"user2",email:"test2@abc.com"},
{id:"test3",company:"test3C",name:"user3",email:"test3@abc.com"},
]
};
},
methods: {},
watch: {},
computed: {},
components: {},
mounted() { },
};
</script>
<style scoped>
.tab-menu{
display: flex;
justify-content: flex-start;
align-items: center;
}
.tab-menu li a{
padding: 10px 15px;
display: block;
font-size: 1.6rem;
border-radius: 5px 5px 0 0;
cursor: pointer;
border: 1px solid #ddd;
border-bottom: 0;
}
.tab-menu li a.active{
background-color: #f8f8f8;
color: #2b7cff;
font-weight: 800;
border: 0;
}
.tab-content{
width: 100%;
height: 100%;
background-color: #f8f8f8;
padding: 15px;
}
</style>