小魏学编程
新手
新手
  • 最后登录2021-11-22
  • 发帖数4
阅读:292回复:0

[vue]vue+element-ui实现后台管理系统动态生成侧边栏

楼主#
更多 发布于:2021-09-28 21:38
html代码:
<!-- 页面主体区域-->
<el-container>
     <!--  侧边栏-->
     <el-aside width="200px">
          <!-- 侧边栏菜单区域-->
          <el-menu background-color="#333744" text-color="#fff" active-text-color="#3B93F4">
                 <!--一级菜单-->
                 <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
                        <!-- 一级菜单模板区-->
                        <template slot="title">
                             <!--  图标-->
                             <i :class="iconsObj[item.id]></i>
                             <!-- 文本-->
                             <span>pw_item.authName</span>
                        </template>
                         <!--  二级菜单-->
                        <el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key="subItem.id">
                         <template slot="title">
                              <!--  图标-->
                              <i class="el-icon-menu"></i>
                              <!--  文本-->
                              <span>pw_subItem.authName</span>
                          </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
<!--            右侧内容-->
            <el-main></el-main>
        </el-container>
script代码:
data(){
            return {
                //左侧菜单数据
                menulist:[],
                //由于后端未返回图标字段,因此通过id来指向对应菜单
                iconsObj:{
                    '125':'iconfont icon-user',
                    '103':'iconfont icon-tijikongjian',
                    '101':'iconfont icon-shangpin',
                    '102':'iconfont icon-danju',
                    '145':'iconfont icon-baobiao',
                },
            }
        },
        created() {
            this.getMenuList()
        },
        methods:{
            //获取所有的菜单
            async getMenuList(){
                const {data:res} = await this.$http.get('menus');
                console.log(res);
                if(res.meta.status !== 200) return this.$message.error((res.meta.msg))
                this.menulist = res.data
            }
        }
原理:通过axios请求数据,然后在data中申明一个数组储存后端返回的数据,然后通过

         v-for循环出各级菜单,并绑定一个key值(item.id)。span标签中的菜单名,动                   态绑定为返回数据中的 item.authName,每个菜单都有一个唯一的index值,正好                 可以动态绑定item.id,由于:index=’ ‘只接收字符串,所以此处使用了字符串拼接


持续更新中....
游客


返回顶部

公众号

公众号