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小白，還在學習中，要是用詞不當，請指正(*^▽^*)！！！