我使用了節點過濾這個控制項,以下為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...