vue+iview使用樹形控件

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

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

3.在使用 vue+iview開發(fā)的過程中,我們經(jīng)常會使用 iview的樹形控件,在這里我就簡單的做一個分享,希望對你有所幫助!

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.注意 這個 return中綁定的數(shù)據(jù),可以參考 iview官方文檔,地址如下:

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

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

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

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