效果图：
实现步骤：
项目结构
我们将构建一个简单的Vue 3项目，包含以下内容：
- 左侧导航栏：用于切换不同页面或模块。
- 右侧内容区域：用于展示不同模块的内容（如小组成员管理）。
代码实现
1. 创建主页面组件 App.vue
首先，在 App.vue 中定义左侧导航栏和内容区域：
<template>
<div id="app" class="app-container">
<!-- 左侧导航栏 -->
<aside class="sidebar">
<div class="user-info">
<div class="avatar"></div>
<p>用户名</p>
<p>@TP</p>
</div>
<nav>
<ul>
<li :class="{ active: activeTab === 'group' }" @click="activeTab = 'group'">小组管理</li>
<li :class="{ active: activeTab === 'task' }" @click="activeTab = 'task'">任务管理</li>
<li :class="{ active: activeTab === 'board' }" @click="activeTab = 'board'">留言板</li>
<li :class="{ active: activeTab === 'resources' }" @click="activeTab = 'resources'">资料库</li>
</ul>
</nav>
</aside>
<!-- 右侧内容区 -->
<main class="content">
<component :is="currentTabComponent" />
</main>
</div>
</template>
<script>
import GroupManagement from "./components/GroupManagement.vue";
export default {
components: {
GroupManagement,
},
data() {
return {
activeTab: "group", // 默认显示小组管理
};
},
computed: {
currentTabComponent() {
switch (this.activeTab) {
case "group":
return "GroupManagement";
case "task":
return "TaskManagement";
case "board":
return "MessageBoard";
case "resources":
return "ResourceLibrary";
default:
return "GroupManagement";
}
},
},
};
</script>
<style>
/* 基本样式 */
.app-container {
display: flex;
height: 100vh;
}
.sidebar {
width: 200px;
background-color: #d3e3d2;
padding: 20px;
}
.user-info {
text-align: center;
margin-bottom: 20px;
}
.avatar {
width: 60px;
height: 60px;
background-color: #ccc;
border-radius: 50%;
margin: 0 auto;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
padding: 10px;
cursor: pointer;
}
.sidebar li.active {
background-color: #a0c4a0;
}
.content {
flex-grow: 1;
padding: 20px;
}
</style>
2. 创建小组管理页面 GroupManagement.vue
GroupManagement.vue 实现了类似图片中的小组管理模块，包含小组成员的增删改查操作。
<template>
<div>
<h2>小组管理</h2>
<div class="group-info">
<h3>网上邻居</h3>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX（小组简介）</p>
<div class="group-actions">
<button @click="editGroup">编辑信息</button>
<button @click="inviteUser">邀请用户</button>
<button @click="dissolveGroup">解散群聊</button>
</div>
</div>
<table class="member-table">
<thead>
<tr>
<th>成员</th>
<th>学校</th>
<th>角色</th>
<th>进组时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="member in members" :key="member.id">
<td>{{ member.name }}</td>
<td>{{ member.school }}</td>
<td>{{ member.role }}</td>
<td>{{ member.joinDate }}</td>
<td>
<button @click="removeMember(member.id)">移除成员</button>
<button @click="transferMember(member.id)">转让小组</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
members: [
{
id: 1,
name: "Wu Jinxuan",
school: "同济大学",
role: "组长",
joinDate: "2024年11月9日",
},
],
};
},
methods: {
editGroup() {
alert("编辑小组信息");
},
inviteUser() {
alert("邀请用户");
},
dissolveGroup() {
alert("解散群聊");
},
removeMember(id) {
this.members = this.members.filter((member) => member.id !== id);
},
transferMember(id) {
alert("转让小组给成员 ID: " + id);
},
},
};
</script>
<style scoped>
.group-info {
margin-bottom: 20px;
}
.group-actions {
display: flex;
gap: 10px;
}
.member-table {
width: 100%;
border-collapse: collapse;
}
.member-table th,
.member-table td {
padding: 10px;
border: 1px solid #ddd;
}
</style>
3. 其他组件 (可选)
对于其他的选项（任务管理、留言板、资料库），可以创建类似的组件文件 TaskManagement.vue、MessageBoard.vue 和 ResourceLibrary.vue。可以用简单的模板内容替代，以保持结构一致：
<template>
<div>
<h2>任务管理</h2>
<p>这是任务管理页面的内容。</p>
</div>
</template>
<script>
export default {
name: "TaskManagement",
};
</script>
总结
- 导航栏切换：
App.vue中使用activeTab变量来控制当前显示的页面组件。 - 小组管理增删改查：在
GroupManagement.vue中实现小组成员的增删操作。 - 样式和布局：使用
flex布局来实现左侧导航栏和右侧内容区域的布局。
标签：vue,return,GroupManagement,小组,member,左侧,导航,页面 From： https://blog.csdn.net/nndsb/article/details/143805078