vue实战精华(四)——ElenemtUI中菜单的双重for循环渲染

1.需求

后台管理系统左侧部分的菜单，从后台获取数据再渲染到页面结构上。

2.代码

这个写法有两种，第一种写法是：

 
   
    
    
      
    
  


data () {
  return {
    menuList: [
      { 
        id:1,
        authName: '用户管理'，
        children: [
          {
             id:11,
             authName: '用户列表'，
             children: []
          },
          {
             id:12,
             authName: '权限管理'，
             children: []
          }
        ]
      }，
      {
        id:2,
        authName: '权限管理'，
        children: [
          {
             id:22,
             authName: '角色列表'，
             children: []
          }
        ]
      }，
      {
         id:3,
        authName: '商品管理'，
        children: []
      }
    ]
  }
}

第二种写法是：

 
   
    
    
      
    
  


data () {
  return {
    menuList: [
      { 
        id:1,
        authName: '用户管理'，
        children: [
          {
             id:11,
             authName: '用户列表'，
             children: []
          },
          {
             id:12,
             authName: '权限管理'，
             children: []
          }
        ]
      }，
      {
        id:2,
        authName: '权限管理'，
        children: [
          {
             id:22,
             authName: '角色列表'，
             children: []
          }
        ]
      }，
      {
         id:3,
        authName: '商品管理'，
        children: []
      }
    ]
  }
}

这里要注意一个点就是，ElementUI中中的这个index如果仅仅只是写成:index="item.id"的话会报错：

因为这个的index属性只接收字符串不接收数值，这是我们可以改成:index="item.id + '' "，因为让数值和字符串拼接可得到一个字符串: