久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

01
2023/07

el-tree技巧之只有最后一層級(jí)的子節(jié)點(diǎn)可被選擇

發(fā)布時(shí)間:2023-07-01 18:26:37
發(fā)布者:MaiMai
瀏覽量:
0

ElementUI官網(wǎng)提供的樹形控件能夠用清晰的層級(jí)結(jié)構(gòu)展示信息,可展開或折疊。對(duì)于需要需要選擇層級(jí)的樹,其提供了show-checkbox參數(shù),將他設(shè)置為true后便可得到一個(gè)帶多選框的樹,如圖所示:

eltree

但是有的時(shí)候,我們只希望選擇子節(jié)點(diǎn),而隱藏根節(jié)點(diǎn)的選框。

eltree

以這條數(shù)據(jù)為例。

由于el-tree支持自定義節(jié)點(diǎn)內(nèi)容,可以通過(guò)兩種方法進(jìn)行樹節(jié)點(diǎn)內(nèi)容的自定義:render-contentscoped slot。我們這里使用第二種scoped slot,使用 scoped slot 會(huì)傳入兩個(gè)參數(shù)nodedata,分別表示當(dāng)前節(jié)點(diǎn)的 Node 對(duì)象和當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)。

其中,第一級(jí)的label不需要選框,第二級(jí)children下的label需要選框。在自定義節(jié)點(diǎn)中,我們準(zhǔn)備好兩個(gè)span標(biāo)簽,通過(guò)v-ifv-else來(lái)區(qū)分根節(jié)點(diǎn)與子節(jié)點(diǎn)。

自定義節(jié)點(diǎn)

這樣,便可以成功去掉根節(jié)點(diǎn)的選框,效果圖如下:

eltree

關(guān)鍵詞:
返回列表