11-12后端返回 对象数据类型 如何 多层级列表渲染--拿一级列表

接着昨天的 el-tbs 渲染

let objData={
        "糖果":{
          "奶糖":{
            "2012":123,
            "2013":234,
            "2014":433,
            "2015":212,
            "2017":437
          },
          "小鹅软糖":{...},
          "糖针":{...}
        },
        "干果":{
          "腰果":{...},
          "夏威夷":{...},
          "核桃":{...}
        },
        "饮品":{
          "矿泉水":{...},
          "茉莉清乳":{...},
          "红牛":{...}
        }
      }

数据格式就如上面的文本

• 完成版在下面感兴趣 可以试一试
  • 要完成的效果如下
  • 
• 首先回顾昨天的难点
  • 使用对象 来 循环渲染，不能直接使用原数据
  • 多层嵌套，还需做默认选中项 实现困难
  • 渲染到最后一层 如何渲染 Chart 图表
• 昨天在下班之前 渲染进度是，只有点击才能出图，不然就是空白
  • 切换到饮品-它的子级矿泉水高亮，但还是干果-腰果的数据
  • 再点一下矿泉水才显示它的，那肯定是不对的
  • 当然，今天把它搞定了

el-tabs 使用 对象数据渲染选项卡

• • 以下是我的思路

1.首先取到一级标签的数据

• 对象数据是不可以使用-forEach-map-filter等遍历方法的。

• 想要得到key 值，用 Object.keys(objData)就会得到 对象的一级对象的键也就是它的名字，我们要用到的titleList

• 

• 注意：这件事情要在 mounted（vue生命周期之一） 里执行一次，并将得到的数据存起来，以便寻找下一项子级

• 上代码

• 这样我们就得到了 一级标题的循环素材

• 对象的 key 是不建议是汉字，数字，特殊字符的，它们不能靠打点调用，拿数据

• 下面就是拿到的数据啦

如果正好碰到这样的问题，先试试看，我要睡了，明天继续

let objData={
        "糖果":{
          "奶糖":{
            "2012":123,
            "2013":234,
            "2014":433,
            "2015":212,
            "2017":437
          },
          "小鹅软糖":{
            "周一":293,
            "周二":746,
            "周三":938,
            "周四":363,
            "周五":648
          },
          "糖针":{
            "六月":2139,
            "七月":2516,
            "八月":2126,
            "九月":7363,
            "十月":9283
          }
        },
        "干果":{
          "腰果":{
            "凌晨":09,
            "早晨":12,
            "中午":23,
            "黄昏":198,
            "夜晚":263
          },
          "夏威夷":{
            "2012":938,
            "2013":373,
            "2014":123,
            "2015":212,
            "2017":360
          },
          "核桃":{
            "六月":123,
            "七月":345,
            "八月":696,
            "九月":463,
            "十月":1964
          }
        },
        "饮品":{
          "矿泉水":{
            "凌晨":21,
            "早晨":445,
            "中午":3242,
            "黄昏":2739,
            "夜晚":1234
          },
          "茉莉清乳":{
            "凌晨":2,
            "早晨":09,
            "中午":123,
            "黄昏":8739,
            "夜晚":562

          },
          "红牛":{
            "凌晨":38,
            "早晨":125,
            "中午":837,
            "黄昏":09,
            "夜晚":1523
          }
        }
      }