11-14. 对象数据类型 多层级列表渲染--实现点击事件-切换

上一章进度

取二级数据 渲染默认值 这是上一章的进度，也就意味着初始化结束
也可以说 组件挂载之后的要展示的内容 的逻辑处理完毕了

1.点击一级 切换二级默认 展示的图表

• 首先查看文档得知 tabs有一个事件 它的参数在这里是没有用到 翻译过来一个是 选项卡窗格上下文（单项内容所处的的环境） 第二个是事件对象，触发事件的 相关数据 在哪里触发的-什么形式触发的，触发体身上还有什么属性等等

这里从糖果切换到干果之后会 tabs 会自动的将 el-tab-pane 也就是每一项零食类型的 名字（糖果、干果..）存到 value上去

• 我要做的是判断 现在展示的是哪一项数据 以便取出表格数据进行渲染

  • 将 value 与 titleList1 （品种名字组成的列表）里面与他相似的
  • 

• 它和做初始化的逻辑是一样的，基本可以照搬。

• 只不过触发条件 一个是 组件挂载完毕，一个是手动触发。

  代码如下

    handleClick() {
      this.titleList1.forEach((item,index)=>{
        if(item == this.value){
          let t2 = this.titleContent1[index]; 
            this.titleList2 = Object.keys(t2);// 那它就是二级 titleList
            this.titleContent2 = Object.values(t2);// 二级内容数据 用来显示/查找三级
            console.log(this.titleList2,'8888888888888888888888888888888');
            // 设默认值是第一项
            // 这里取到的是2013 2014等日期，我们把它设置为图表的 柱标
            this.chartOption.xAxis.data = Object.keys(this.titleContent2[0]);
            console.log(Object.keys(this.titleContent2[0]),'============================================');
            // 这里取到的是对应 2013数据 2014数据 等
            this.chartOption.series.data = Object.values(this.titleContent2[0]);

            this.value2 = this.titleList2[0]
        }
      })

    },