Vue 3实现一个带有左侧导航菜单的页面。该页面包含一个类似的增删改查（CRUD）功能模块。左侧的导航栏包含不同的功能选项（如任务管理、小组管理等），点击时可以显示对应的页面内容

效果图：

实现步骤：

项目结构

我们将构建一个简单的Vue 3项目，包含以下内容：

1. 左侧导航栏：用于切换不同页面或模块。
2. 右侧内容区域：用于展示不同模块的内容（如小组成员管理）。

代码实现

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>

 

总结

1. 导航栏切换：App.vue 中使用 activeTab 变量来控制当前显示的页面组件。
2. 小组管理增删改查：在 GroupManagement.vue 中实现小组成员的增删操作。
3. 样式和布局：使用 flex 布局来实现左侧导航栏和右侧内容区域的布局。