vue+iview使用樹(shù)形控件

1.開(kāi)發(fā)環(huán)境 vue+iview

2.電腦系統(tǒng) windows10專業(yè)版

3.在使用 vue+iview開(kāi)發(fā)的過(guò)程中,我們經(jīng)常會(huì)使用 iview的樹(shù)形控件,在這里我就簡(jiǎn)單的做一個(gè)分享,希望對(duì)你有所幫助!

4.在template中添加如下代碼:

<Scroll height='760'> <Tree @on-select-change='chentreelick' :data='treedata' expand-node ></Tree></Scroll>

5.在 return 中添加如下代碼:

treedata: [ { title: 'parent 1', chenshow: false, expand: true, children: [ { title: 'parent 1-1', chenshow: false, expand: true, children: [{ title: 'leaf 1-1-1', chenshow: true,},{ title: 'leaf 1-1-2', chenshow: true, selected: true,}, ], }, { title: 'parent 1-2', chenshow: false, expand: true, children: [{ title: 'leaf 1-2-1', chenshow: true,},{ title: 'leaf 1-2-1', chenshow: true,}, ], }, { title: 'parent 1-3', chenshow: false, expand: true, children: [{ title: 'leaf 1-3-1', chenshow: true,},{ title: 'leaf 1-3-1', chenshow: true,}, ], }, { title: 'parent 1-4', chenshow: false, expand: true, children: [{ title: 'leaf 1-4-1', chenshow: true,},{ title: 'leaf 1-4-1', chenshow: true,}, ], }, { title: 'parent 1-5', chenshow: false, expand: true, children: [{ title: 'leaf 1-5-1', chenshow: true,},{ title: 'leaf 1-5-1', chenshow: true,}, ], }, { title: 'parent 1-6', chenshow: false, expand: true, children: [{ title: 'leaf 1-6-1', chenshow: true,},{ title: 'leaf 1-6-1', chenshow: true,}, ], }, { title: 'parent 1-7', chenshow: false, expand: true, children: [{ title: 'leaf 1-7-1', chenshow: true,},{ title: 'leaf 1-7-1', chenshow: true,}, ], }, { title: 'parent 1-8', chenshow: false, expand: true, children: [{ title: 'leaf 1-8-1', chenshow: true,},{ title: 'leaf 1-8-1', chenshow: true,}, ], }, { title: 'parent 1-9', chenshow: false, expand: true, children: [{ title: 'leaf 1-9-1', chenshow: true,},{ title: 'leaf 1-9-1', chenshow: true,}, ], }, ], }, ],

5-1.注意 這個(gè) return中綁定的數(shù)據(jù),可以參考 iview官方文檔,地址如下:

https://www.iviewui.com/components/tree

6.在 methods中添加如下代碼:

chentreelick(data) { console.log(data); console.log('點(diǎn)擊了'); console.log(data[0].chenshow); }, //注意:參數(shù) data,在點(diǎn)擊的時(shí)候可以獲取到后臺(tái)的數(shù)據(jù),這個(gè)數(shù)據(jù)是來(lái)自后臺(tái)的,在實(shí)際開(kāi)發(fā)中,我們可以 利用 data,把后臺(tái)需要的id傳給 后臺(tái)

到此這篇關(guān)于vue+iview使用樹(shù)形控件的具體使用的文章就介紹到這了,更多相關(guān)vue iview 樹(shù)形控件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！