react 自定義樹（組織架構(gòu)）

我的原型圖長(zhǎng)這樣，我的第一想法是使用antd提供的tree組件，但是發(fā)現(xiàn)似乎沒法定義右側(cè)的內(nèi)容

我的數(shù)據(jù)結(jié)構(gòu)長(zhǎng)這樣

\bullet 渲染出基本結(jié)構(gòu)

? ??????\star 定義組件，接收source數(shù)據(jù)，并遞歸的將source拍平

? ??????\star 使用ul+li結(jié)構(gòu)渲染出基本結(jié)構(gòu)

? ? ? ? \star 對(duì)于長(zhǎng)短不一的子級(jí)架構(gòu)，使用css樣式調(diào)整，對(duì)應(yīng)數(shù)據(jù)源中的level

? ? ? ? 效果如下

\bullet 樹展開與收起的處理

? ??????向li添加綁定事件

? ??????????????\circ "level-"+v.level將作為后續(xù)dom操作時(shí)的標(biāo)識(shí)

? ??????????????\circ class為arrow的span元素則是箭頭，將在用戶點(diǎn)擊后rotate切換

? ??????\star 處理展開收起、箭頭切換

? ??????????????????\circ 如果level為4，則為最后一級(jí)，不需要處理

? ??????????????????\circ isHide是隱藏后打上的flag，將據(jù)此進(jìn)行操作切換

? ??????????????????\circ 通過(guò)$(ev.target).nextAll()拿到從自己開始向后所有的兄弟元素，如果找到了同級(jí)的level，則不再向下執(zhí)行操作。因?yàn)槲覀冎恍枰幚懋?dāng)前l(fā)evel下的子level即可

\bullet 右側(cè)操作按鈕

? ? ? ? 從圖中可以看出，共存的是修改和查看按鈕，4級(jí)節(jié)點(diǎn)沒有新增，1級(jí)節(jié)點(diǎn)沒有刪除，故代碼如下

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容