element-plus后台管理页面案例

以下是一个使用 element-plus 开发的后台管理页面案例：

<template>
  <div class="container">
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleMenuSelect">
        <el-submenu index="1">
          <template #title>
            <i class="el-icon-menu"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template #title>分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组二">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template #title>选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template #title>
            <i class="el-icon-setting"></i>
            <span>导航二</span>
          </template>
          <el-menu-item index="2-1">选项5</el-menu-item>
          <el-menu-item index="2-2">选项6</el-menu-item>
          <el-menu-item index="2-3">选项7</el-menu-item>
          <el-menu-item index="2-4">选项8</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template #title>
            <i class="el-icon-message"></i>
            <span>导航三</span>
          </template>
          <el-menu-item index="3-1">选项9</el-menu-item>
          <el-menu-item index="3-2">选项10</el-menu-item>
          <el-menu-item index="3-3">选项11</el-menu-item>
          <el-menu-item index="3-4">选项12</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 内容区域 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['menuActive'])
  },
  methods: {
    handleMenuSelect(index) {
      this.$store.commit('setMenuActive', index);
    }
  }
};
</script>

<style>
.container {
  display: flex;
  height: 100%;
}

.el-aside {
  background-color: #545c64;
  color: #fff;
}

.el-main {
  padding: 20px;
}
</style>

该案例使用了 element-plus 的组件，如 `el-aside`、`el-menu`、`el-main` 等。其中，`el-menu` 组件用于实现侧边栏菜单，`router-view` 组件用于显示路由对应的组件。通过 `mapState` 函数映射 `menuActive` 属性，可以实现菜单选中状态的同步。通过 `setMenuActive` 方法，可以实现菜单选中状态的设置。