將之前的用css3+jq實現的橫向樹樣式簡單封裝成元件使用到vue專案中,檔名為transversetree.vue
**:
在父元件中使用import引入該元件:
import transversetree from './transversetree'
註冊元件:
components: ,
在template中使用:
其中,treedata為乙個陣列,在data中給treedata乙個初始值:
treedata: [
實現效果:
ps:需要特別說明的是,我目前的**暫時只支援這兩種樣式,即:
1父節點-1子節點-1/多孫節點,或是1父節點-多子節點-1孫節點,樣式是通過jq去判斷修改的,以後有時間的話再去研究優化爭取可復用性強一些。希望對大家能有所幫助。
歡迎交流討論。
vue橫向樹結構 vue樹形結構的實現
1.主要 使用單檔案元件的方式,需要乙個父元件treemenu,和子元件treeitem 1.1 父元件treemenu.vue nodes treedata export default click activeitem v for item,index in nodes.nodes key in...
vue分頁元件實現
子元件中 page bar pageul sendmessage reduce class page a li for index in indexs key index class btnclick index a li page click sendmessage add a li page 共...
vue遞迴元件實現
需求 需要顯示不確定層級不確定值型別 可能是陣列裡有物件,物件裡有資料 的資料 資料結構如下 registered address registered address in full 241 rue jarry e montr al qu bec h2p1t6 canada industry co...