Vue element 二級菜單綁定示例

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