vue元件橫向樹實現

2021-08-22 00:14:18 字數 602 閱讀 3873

將之前的用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...