vue樹形菜單

vue樹形菜單

因爲項目緣由，沒有使用ui框架上的樹形菜單，因此本身動手並參考大佬的代碼寫了一個樹形菜單的組件，話很少說，直接上代碼。
html代碼

js代碼直接調用api 把請求到的數據直接賦值給permissions就能夠了，這裏很少說。直接說最重要的部分，點擊checkbox 把id傳給後臺 並實現全選，反選。

---

全選，反選

curry(e,node){
  if (e.target.checked) {
    node.subDetail.forEach((sub, i)=>{
      node.subDetail[i].checked =true;
    })
  }else{
    node.subDetail.forEach((sub, i)=>{
      node.subDetail[i].checked =false;
    })
  }
},

經過v-model的數據雙向綁定這一屬性，對對後臺返回的checked這一字段作判斷，當點擊一級菜單checked爲true時，把二級菜單的checked也賦值爲true 就能夠實現全選反選。

---

點擊菜單添加id給後臺

watch:{
  permissions: {
        deep: true,
        immediate: true,
        handler(val) {
            this.form.cPermissionIds = [];
            this.form.cDetailIds = [];
            val.forEach(menu => {
                if (menu.checked) {
                    this.form.cPermissionIds.push(menu.cPermissionId);
                };
                menu.subDetail.forEach(sub => {
                    if (sub.checked) {
                        this.form.cDetailIds.push(sub.cDetailId);                   
                    };
                });
            });
        },
    },
},

經過監聽permissions的數據變化 當checkbox被選中，checked爲true時把checkbox所對應的id 推動數組裏面存起來，注意的是，必定要在前面把數組清空，這樣能夠防止，屢次重複點擊所形成的數據重複。
以上所說純屬我的觀點，歡迎你們提出寶貴的建議，若有雷同，請不要懟我。