Vue 两级联动

Vue的两级联动，其实跟数组类似，直接上代码吧。

<template>
  <div>
    <div>
      <label class="titlestyle">菜单一</label>
      <div class="typediv">
        <label
          class="typestyle"
          v-bind:class="{ updata_lable: IsIndex === index }"
          v-for="(item, index) in typelist"
          :key="index"
          @click="FirstLevelChange(index, item)"
          >{{ item.menu_name }}</label
        >
      </div>
    </div>
    <br />
    <div style="margin-top: 7px;">
      <label class="titlestyle1" style>菜单二</label>
      <div class="typediv1">
        <label
          class="typestyle"
          v-bind:class="{ updata_lable: Isred === index }"
          v-for="(item, index) in typelist[IsIndex].node"
          :key="index"
          @click="SecondLevelChange(index, item)"
          >{{ item.menu_name }}</label
        >
      </div>
    </div>
  </div>
</template>

 

<script>
export default {
  name: "clable",
  data() {
    return {
      typelist: [
        {
          id: 4,
          parent_id: 0,
          menu_name: "第一级菜单 2",
          sorting: 0,
          node: [
            {
              id: 5,
              parent_id: 4,
              menu_name: "第二级菜单 2-1",
              sorting: 0
            }
          ]
        },
        {
          id: 2,
          parent_id: 0,
          menu_name: "第二级菜单 2",
          sorting: 0,
          node: [
            {
              id: 5,
              parent_id: 4,
              menu_name: "第二级菜单 2-1",
              sorting: 0
            }
          ]
        }
      ],
      IsIndex: 0,
      Isred: 0
    };
  },

  methods: {
    FirstLevelChange(index, item) {
      this.IsIndex = index;
      this.Isred = 0;
      this.$emit("SelectChange", 1, item.id);
    },
    SecondLevelChange(index, item) {
      this.Isred = index;
      this.$emit("SelectChange", 2, item.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.typestyle {
  color: rgba(112, 112, 112, 1);
  font-size: 14px;
  margin-right: 20px;
}
.typediv {
  float: left;
  margin-left: 20px;
}
.titlestyle {
  float: left;
  font-size: 14px;
  font-family: $base-font-family;
  font-weight: normal;
  color: rgba(112, 112, 112, 1);
  opacity: 1;
  margin-top: 5px;
}
.updata_lable {
  color: $base-color;
  font-size: 14px;
  margin-right: 20px;
}
.titlestyle1 {
  float: left;
  font-size: 14px;
  font-family: $base-font-family;
  font-weight: normal;
  color: rgba(112, 112, 112, 1);
  opacity: 1;
  margin-top: 5px;
}
.typediv1 {
  float: left;
  margin-left: 20px;
}
</style>

第二级菜单里面的 v-for="(item, index) in typelist[IsIndex].node" 里面加上[[IsIndex].node]是因为第二级菜单是在第一级的菜单基础上进行点击改变的。node是在数组里面定义的菜单的下一级数据的名称。

需要注意的是，在js绑定数据这一块，取的名字要与lable里面绑定的数据名称一致，要不然数据是出不来的，这可马虎不得！！！

本人呀，也是vue小白，还在学习中，要是用词不当，请指正(*^▽^*)！！！