vue+iview使用樹形控件

1.開發環境 vue+iview

2.電腦系統 windows10專業版

3.在使用 vue+iview開發的過程中,我們經常會使用 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中綁定的數據,可以參考 iview官方文檔,地址如下:

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

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

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

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