element动态菜单和图标_el-icon-menu

 <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu
        :default-openeds="openeds"
        :defaultOpeneds="['11','12','13']"
          :router="true"
          :collapse-transition="false"
          :collapse="isCollapse"
          background-color="#fff"
          text-color="#333"
        >
          <!-- 一级菜单 -->
          <el-submenu  :index="item.id + ''" v-for="item in list" :key="item.id">
            <template slot="title">
              <i :class="iconsObj[item.id]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="'/' + item1.path + ''"
              v-for="item1 in item.children"
              :key="item1.id"
              @click="saveNavState('/' + item1.path)"
            >
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ item1.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

//菜单图标假数据    
iconsObj: {
        11: "iconfont icon-yunyingzhongxin",
        12: "iconfont icon-yonghuzhongxin_yonghuliebiao",
        13: "iconfont icon-caiwuzhongxin",
        14: "iconfont icon-shangpinguanli",
        15: "iconfont icon-peizhiguanli1",
        16: "iconfont icon-xitongpeizhi",
      },
//菜单假数据     
 list: [
        {
          authName: "用户中心",
          children: [
            {
              authName: "用户列表",
              id: 1,
              // order: 7,
              path: "userlist",
            },
            { authName: "用户资金明细", id: 2, order: 8, path: "usercapitaldetail" },
          ],
          id: 11,
          // order: 58,
          path: "usercenter",
        },
        {
          authName: "设备中心",  
          children: [
            {
              authName: "充电站列表",
              id: 4,
              order: 1,
              path: "chargerlist",
            },
            { authName: "充电桩列表", id: 5, order: 1, path: "stationlist" },
            { authName: "电价配置", id: 6, order: 1, path: "electricitycofig" },
            { authName: "报修列表", id: 7, order: 1, path: "repairlist" },
          ],
          id: 12,
          // order: 2,
          path: "devicecenter",
        },
        {
          authName: "财务中心",
          children: [
            { authName: "订单列表", id: 8, order: 1, path: "orderlist" },
            { authName: "充值列表", id: 9, order: 1, path: "paylist" },
            { authName: "收款列表", id: 10, order: 1, path: "cashinlist" },
          ],
          id: 13,
          // order: 3,
          path: "financecenter",
        },
        {
          authName: "合作中心",
          children: [
            { authName: "合作商家", id: 12, order: 1, path: "cooperateshops" },
            { authName: "结算管理", id: 13, order: 1, path: "balancemanage" },
          ],
          id: 14,
          // order: 4,
          path: "cooperatecenter",
        },
        {
          authName: "系统管理",
          children: [
            { authName: "管理员列表", id: 14, order: 1, path: "adminlist" },
            { authName: "菜单列表", id: 15, order: 1, path: "menulist" },
            { authName: "日志列表", id: 16, order: 1, path: "loglist" },
          ],
          id: 15,
          // order: 5,
          path: "stystemmanage",
        },
      ],