ElementUI Tree 樹形結構展示

2021-10-25 00:07:44 字數 2278 閱讀 9186

我使用了節點過濾這個控制項,以下為elementui官方提供的**。

在需要對節點進行過濾時,呼叫 tree 例項的filter方法,引數為關鍵字。需要注意的是,此時需要設定filter-node-method,值為過濾函式。

placeholder=

"輸入關鍵字進行過濾"

v-model=

"filtertext"

>

<

/el-input>

class

="filter-tree"

:data=

"data"

:props=

"defaultprops"

default

-expand-all

:filter-node-method=

"filternode"

ref=

"tree"

>

<

/el-tree>

export

default},

methods:},

data()

,]}]

},,]

},,]

}], defaultprops:};

}};<

/script>

//頁面實現

"true"

:model=

"searchform" ref=

"searchform" label-width=

"auto"

>

style=

"width: 200px"

placeholder=

"輸入關鍵字進行過濾"

v-model=

"filtertext"

>

<

/el-input>

@node-click=

"getnodedata"

node-key=

"id"

class

="filter-tree"

:data=

"materialtreeoptions"

:props=

"defaultprops"

default

-expand-all

:filter-node-method=

"filternode"

ref=

"tree"

>

<

/el-tree>

<

/el-form>

//方法

//呼叫介面fetchtree,具體後端怎麼傳資料可以檢視我的另一篇文章哦!

import

from

'@/api/workshop/materialtype'

import

from

'vuex'

export

default

, dataform:

, defaultprops:

, materialtreeoptions:

, materialoptions:

, datalistloading:

false

, addorupdatevisible:

false}}

, watch:},

created()

, computed:

, methods:);

this

.datalistloading =

false;}

,/** 通過關鍵字過濾樹節點 */

filternode

(value, materialtreeoptions)

,/** 查詢物料分類下拉樹結構 */

gettreeselect()

this

.materialtreeoptions = choosematerial

});},

}<

/script>

fetchtree呼叫後台傳過來已經封裝好的樹形資料

具體實現之前寫過:

elementUI tree非同步樹拖拽問題

1.非同步樹第一層級的節點拖拽報錯問題 報錯資訊如下 原因 elementui在封裝tree時,會為tree新增乙個頁面不可見的根結點,該節點的子集就是樹的第一層級的所有節點。在節點拖拽時,會根據目標節點的父節點的data的值進行操作。而構建非同步樹時,elementui忘了給非同步樹的不可見的跟節...

樹形DP 樹形DP四例

是時候練一下dp了!我的題單 portkey f u,if fu,i 表示以u uu為根節點的子樹中保留i ii條樹枝的最大蘋果數 f u,i max f max f fu,i max這些題是菜,但也不能輕視啊!include using namespace std define in read i...

樹形操作1 樹形拖拽選擇

樹形運算元據,做個整理總結。本篇是關於樹節點拖拽選擇,重新生成一棵新樹,並支援刪除節點。demo 是基於 jquery 及 easy ui 庫實現的。截圖 利用 css3 實現。主要運用了 before,after選擇器 畫 了兩個圓,然後利用border進行圓的調整,最後利用animation及t...