文档章节

Vue element 二级菜单绑定示例

tianma3798
 tianma3798
发布于 2018/10/18 14:36
字数 197
阅读 146
收藏 0

一、element ui  中动态绑定二级菜单示例

1.视图绑定

    <!-- 两级菜单展示 -->
     <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      >
      <el-submenu 
       v-for="item in menus" :key="item.ModelId"
      :index="item.ModelId+''">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.ModelName}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="subItem in item.Menu" :key="subItem.MenuID"
          :index="item.ModelId+'-'+subItem.MenuId+''" >
          <i class="el-icon-tickets"></i>
          <span>{{subItem.MenuName}}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>

2.js

export default {
  data() {
    return {
      count: 0,
      menus: []
    };
  },
  created() {
    var _this = this;
    //ajax获取菜单
    $.get("http://localhost:55000/api/menu/getlist", data => {
      console.info(data);
      _this.count = data.length;
      _this.menus = data;
    });
  },
  methods: {}
};

显示结果:

 

更多:

Vue中路由管理器Vue Router使用介绍(三)

Vue中路由管理器Vue Router使用方式(二)-推荐

Vue中路由管理器Vue Router使用方式(一)

© 著作权归作者所有

tianma3798
粉丝 16
博文 144
码字总数 42290
作品 0
济南
高级程序员
私信 提问
Vue element 表格获取选中项操作

一、在使用element table表格时,获取选中项处理 1.视图 2.js 更多: Vue element 二级菜单绑定示例 Vue中路由管理器Vue Router使用介绍(三) Vue中路由管理器Vue Router使用方式(二)-推荐...

tianma3798
2018/10/18
0
0
Vue element表格分页数据加载示例

一、element ui表格分页数据加载示例 1.视图 2. js 显示结果: 二、后台接口代码 更多: Vue element 表格获取选中项操作 Vue element 二级菜单绑定示例 Vue中路由管理器Vue Router使用介绍(...

tianma3798
2018/10/18
0
0
Vue+Element UI 使用整理

一、环境搭建 Element UI框架+Vue开发搭建示例 二、UI使用示例、常见问 1.Vue element 二级菜单绑定示例 2.Vue element 表格获取选中项操作 3. Vue element表格分页数据加载示例 3.Vue Elem...

tianma3798
02/13
0
0
vscode 中的 vue 格式化(一)

使用 vscode 开发 vue, 必不可少的插件包括 vetur, prettier vetur 提供了下面一系列的功能: Features Syntax-highlighting 高亮 Snippet 代码片段 Emmet 缩写语法 Linting / Error Checki...

tianma3798
2018/10/18
0
0
Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap

一、Vue中在使用Vue CLI开发中默认没法使用UEditor 其中UEditor中也存在不少错误,再引用过程中。 但是UEditor相对还是比较好用的一个富文本编辑器。 vue-ueditor-wrap说明 Vue + UEditor + ...

tianma3798
02/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

lombok的一个踩坑记录

lombok的类如下所示: package com.divx.service.model.task;import com.divx.service.model.BaseTypeMedia;import lombok.Data;/** * @author wuzhilang * @Title: QuestionResult ......

无知的小狼
38分钟前
2
0
如何使用markdown

我没有导入相应的包 这个用的还是有些问题 而且显示的时候格式问题还没解决 <div class="blog_editor" style="margin: 0 auto;width:60%;height:1000px;background-color: white;"> <div s......

南桥北木
41分钟前
4
0
纯手写SpringBoot框架之注解方式启动SpringMVC容器

使用Java语言创建Tomcat容器,并且通过Tomcat执行Servlet,接下来,将会使用Java语言在SpringBoot创建内置Tomcat,使用注解方式启动SpringMVC容器。 代码实现。 1.pom.xml文件,需要依赖的jar...

Java老王
42分钟前
2
0
Presto查询引擎简单分析

Hive查询流程分析 各个组件的作用 UI(user interface)(用户接口):提交数据操作的窗口 Driver(引擎):负责接收数据操作,实现了会话句柄,并提供基于JDBC / ODBC的execute和fetch API Metas...

MobService
44分钟前
1
0
《软件架构的10个常见模式》,看完真心觉得不错

作者:半吊子全栈工匠原文链接:https://blog.csdn.net/wireless_com/article/details/89008061 企业规模的软件系统该如何设计呢?在开始写代码之前,我们需要选择一个合适的架构,这个架构...

Java干货分享
55分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部