vue实现 前端处理嵌套数据问题

我们在开发的时候，有时会遇到类似于三级联动的问题，这时候后端传过来的数据类型为数组包含对象，对象再包含数组，数组再包含对象的层级关系，如下图：

我们要实现的效果类似elementUI中的级联选择器
如下图：

<template>
  <div class="hello">
    <div class="l div1">
      <div
        v-for="(item , i) in mydata"
        :class="{mycolor : i == num1}"
        @click="nameClick(i)"
      >
        <div>{{item.name}}</div>
      </div>
    </div>
    <div class="l div2">
      <div
        v-for="(item1,a) in mydata[num1].selfinform"
        :class="{mycolor2 : a == num2}"
        @click="div2Click(a)"
      >
        <div>{{item1.age}}</div>
      </div>
    </div>
    <div class="l div3">
      <div v-for="(item2) in mydata[num1].selfinform[num2].otherInner">
        <div>{{item2.Number}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    methods: {
      nameClick(i) {
        this.num2 = 0;
        this.num1 = i;
        console.log("我是num1的i:" + i);
      },
      div2Click(a) {
        this.num2 = a;
        console.log("我是num2的a:" + a);
      },
    },
    data() {
      return {
        num1: 0,
        num2: 0,
        mydata: [
          {
            name: "指南",
            selfinform: [
              {
                age: "设计原则",
                otherInner: [{ Number: "一致" }, { Number: "反馈" }],
              },
              {
                age: "导航",
                otherInner: [{ Number: "侧向导航" }, { Number: "顶部导航" }],
              },
            ],
          },
          {
            name: "组件",
            selfinform: [
              {
                age: "basic",
                otherInner: [{ Number: "icon图标" }, { Number: "button按钮" }],
              },
              {
                age: "form",
                otherInner: [{ Number: "color色彩" }],
              },
              {
                age: "data",
                otherInner: [{ Number: "typography字体" }],
              },
              {
                age: "notice",
                otherInner: [{ Number: "icon图标" }],
              },
              {
                age: "navigation",
                otherInner: [{ Number: "button按钮" }],
              },
              {
                age: "others",
                otherInner: [{ Number: "Radio单选框" }],
              },
            ],
          },
          {
            name: "资源",
            selfinform: [
              {
                age: "Axure Components",
                otherInner: [{ Number: 1873333333311 }],
              },
              {
                age: "Sketch Templates",
                otherInner: [{ Number: 1560088008811 }],
              },
              {
                age: "组件交互文档",
                otherInner: [{ Number: 18788888888 }],
              },
            ],
          },
        ],
      };
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .div1,
  .div2,
  .div3 {
    border: 1px solid red;
    width: 200px;
  }
  .div1 > div {
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid black;
    box-sizing: border-box;
  }
  .div2 > div {
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid black;
    box-sizing: border-box;
  }
  .div3 > div {
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid black;
    box-sizing: border-box;
  }
  .div2 {
    border: 1px solid green;
  }
  .div3 {
    border: 1px solid blue;
  }
  .l {
    float: left;
  }

  .mycolor {
    background-color: yellow;
  }
  .mycolor2 {
    background-color: cyan;
  }
</style>

最终效果：

这里我是使用vue实现的这个效果
具体思路：
首先循环第一层数组，将里面的信息输入到第一列，因为循环的时候可以获取到对应的下标，所以我们可以在第二列循环对应下标中的数据，可以先给其默认值num1 ：0，num2 : 0，这样的话，初始状态就会直接显示第一行的数据
之后给第一列的标签添加点击事件，当点击之后根据对应的下标动态修改num1的值，点击事件触发时，第二列渲染的数据就会随着num1的改变而改变

注意：
这里我发现一个问题，指南、组件、资源分别对应的第二列 ，第三列的数据量是不同的，如果我们点击组件时，第二列会显示六条数据，我们点击一下其中的others，这时num2的下标就是5，这时，如果我们再点击指南，因为它的第二列只有两条数据，所以会报错
解决方案：
给nameClick(i)的点击事件中添加this.num2 = 0 这样就可以使数据初始化，报错的情况也就消失了