原生JS實現樹狀結構列表
- 2020 年 7 月 8 日
- 筆記
- javascript
樹狀結構列表,這個技術點之前有寫過了,是基於vue講解,但似乎都沒有解決痛點,最基礎的原生JS該怎麼實現呢?
這篇文章會全面詳細的介紹樹狀結構列表的實現,從數據處理成樹狀結構,到動態生成dom節點渲染頁面。
確定原始數據結構
原始數據是需要按照下面這種結構來定義的,如果原始數據已經是被後端處理成樹狀結構,就可以省略這一步驟。
使用map處理數據
把數組val打印出來看一下。
html結構
動態創建dom
將動態創建dom封裝成一個方法,裏面使用了遞歸。循環val數組調用這個方法,即可以實現動態創建dom。