Vue element 二级菜单绑定示例

2019独角兽企业重金招聘Python工程师标准>>>

一、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使用方式（一）

转载于:https://my.oschina.net/tianma3798/blog/2248781