vue tree元件的實現

2021-09-25 02:19:04 字數 1818 閱讀 6244

乙個簡單的遞迴元件如下例所示:

tree.vue

="child-node"

>

="vue-tree-item" v-

for=

"(item, index) in treedatalist"

:key=

"index"

>

="tree-node"

:style=

"pleft" @click=

"togglechildren(item)"

>

}<

/div>

v-if=

"item.children"

:tree-data-list=

"item.children"

:tree-index=

"treeindex + 1"

@togglechildren=

"togglechildren"

>

<

/exporttree>

<

/li>

<

/ul>

<

/template>

export

default

, treeindex:},

data()

px;`

}},methods:}}

<

/script>

index.vue

="width: 200px;border: 1px solid #ccc;"

>

:tree-data-list=

"treedatalist"

@togglechildren=

"togglechildren"

>

<

/exporttree>

<

/div>

<

/template>

import exporttree from

'components/exporttree/exporttree'

export

default

,data()

,]}]

}}, methods:}}

<

/script>

元件內呼叫元件,本來就是一種遞迴的思想。繫結的treedatalist有多少層級,那就會遞迴多少層,因為每一層都有v-for都會迴圈子節點。

注意:元件內呼叫元件,需要有乙個條件來終止遞迴遞迴元件必須含有name這個屬性(name指的是元件的名字),因為沒有name這個屬性會造成空間自身不能呼叫自身

tree元件有選單功能:上移、下移。 因為層級太深,會導致真正的index值丟失

解決:在初始化遞迴處理資料時,新增對應的引用父級(即直接父級)

this

.treedatalist.

foreach

(item =>

)function

addparent

(tree, directparent)

* parent: 當前節點的父級

*/tree.directparent = directparent

if(tree.children ==

null

) tree.children.

foreach

(item =>

)}

easyui元件實現

資料 datagrid 獲得 資料,準備初始化 function inittable var row data var total result.total for var i 0 i result.data.length i buildgrid row data error function 初始...

元件的設計與實現

com元件從ole技術上發展而來 object linking and embedding,物件連線與嵌入,簡稱ole技術。ole 不僅是桌面應用程式 整合,而且還定義和實現了一種允許應用程式作為軟體 物件 資料集合和運算元據的函式 彼此進行 連線 的機制,這種連線機制和協議稱為元件物件模型 com...

Flex 遍歷元件的實現

flex 有兩個陣營元件 spark 元件和mx 元件,關於spark 元件和mx 元件的區別,spark 元件具體有哪些?mx 的其它文件。的所有元件,也可以遍歷group box 中包含的元件等等。遍歷元件需要做2 件事情 1 區別是spark 元件還是mx 元件,因為spark 元件和mx 元...