VUE的checkedBox選中父類遍歷子類的方法

2021-10-12 12:51:44 字數 1124 閱讀 1872

tree結構方法可以參考elementui官網方法。 我這邊已經封裝了tree的方法,這塊部分略!這裡目的是選中父類如何遍歷子類的方法。

封裝的my-tree.vue

略!!!

可參考這個元件,自己封裝

引用:封裝的vue的tree

>然後就實現checkchange選中checkedbox的方法,先上**後講解(注意看備註)。

checkchange(data, node)else

},

上面呼叫遞迴方法

setchildrenchecked(node, ischecked) 

for (let child of node.children)

},setparentchecked(node)

/* 這個是選中孫類(南山區),父類被選中(深圳),第一級不被選中(廣東)

let allsamelevel = true; // 判斷所有同級是否和當前狀態一樣

for (let samelevel of node.parent.children)

}if (!allsamelevel)

*/node.parent.checked = true;

this.setparentchecked(node.parent);

},setparentuncheck(node)

/* 孫節點取消(南山區),子節點跟著取消(深圳),父節點沒有取消(廣東)

let allsamelevel = false;

for (let samelevel of node.parent.children)

}if (!allsamelevel)

*/node.parent.checked = false;

this.setparentuncheck(node.parent);

},

以上**已經實現,驗證可以。

tree結構大概如下(本地即廣東省):

vue 使用window的物件 Vue構造選項

記憶體圖 new vue 就是構造乙個例項 物件 這個例項會根據你給的選項得出乙個物件,我們把這個物件命名為vm 把vue的例項命名為vm是尤雨溪的習慣,我們應該沿用 vm物件封裝了對檢視的所有操作,包括資料讀寫 事件繫結 dom更新 vm的建構函式是vue,按照es6的說法,vm所屬的類是vue ...

vue實現全選全不選

全選功能可以說是前端開發中非常常見的乙個功能,以前的專案開發用jquery開發比較多。最近在使用vue前端框架重構之前的專案。從jquery到vue的轉變主要是乙個思想想的轉變,是將原有的直接操作dom的思想轉變到運算元據,用資料驅動dom,也是vue框架的乙個核心思想,思想轉變過來,對功能的實現自...

vue實現全選 反選功能

用vue寫業務 時候,後端大神丟給我一堆資料,要求是做全選,反選功能,然後把使用者更改的資料全部返回給他 基本思路 如果父級選中了,那麼父級下面的子集全部選中checked true 如果子集中選中了乙個,那麼父級應該被勾選中 如果子集乙個都沒有選中,那麼父級此時應該沒有選中 最後提交使用者改變後的...