elementUI下拉樹元件封裝

使用元件：popover 彈出框、tree 樹形控制項 和 input 輸入框

用法：

1、新建乙個.vue檔案，貼上以下元件封裝的**（完全可以使用）

2、在頁面需要使用下拉樹的地方呼叫即可。

（1）import selecttree from '@/components/selecttree/selecttree'

（2）components:

（3）頁面呼叫

元件封裝**：

1

<
template
>
2<
div 
v-if
="update"
>
3<
el-popover
4popper-class
="selecttree"
5placement
="bottom-start"
6transition
="fade-in-linear"
7v-model
="visible"
8min-width
="200"
9trigger
="click"
>
10<
el-tree
11:data
="data"
12:props
="defaultprops"
13empty-text
="無資料"
14:node-key
="defaultprops.id"
15:default-expanded-keys
="defaultexpandedkeys"
16:check-on-click-node
="true"
17ref
="tree1"
18:expand-on-click-node
="false"
19:filter-node-method
="filternode"
20:highlight-current
="true"
21@node-click
="handlenodeclick"
>
22el-tree
>
23<
el-input
24v-model
="filtertext"
25@clear
="clear"
26:placeholder
="placeholder"
27:disabled
="disabled"
28slot
="reference"
29:clearable
="clearable"
30:suffix-icon
="icon"
>
31el-input
>
32el-popover
>
33div
>
34template
>
35<
script
>
36export 
default,45
disabled: ,
49clearable: ,
53filterable: ,
57defaultprops: 65}
66},
67nodekey: 
71},
72data() 
80},
81async created() 
85},
86mounted() ,
89watch: 
else
else
108return
109})
110}
111}
112}
113},
114visible(val) 
else
120},
121filterable(val) )
127}
128},
129methods: 
else
139}
140},
141setfilter(arr) 
148} 
else
153154
}155
})156
},157
setdisabled(arr) 
163})
164165
},166
filternode(value, data) ,
170handlenodeclick(obj, node) 
174this
.$refs.tree1.setcurrentkey(obj[
this
.defaultprops.id])
175this
.$emit(
'input
', obj[
this
.defaultprops.id])
176this
.filtertext 
=obj[
this
.defaultprops.label]
177this
.visible 
=false
178},
179clear() 
183},
184beforedestroy() ,
186destroyed() 
188}
189190
script
>
191<
style 
lang
="scss"
>
192.selecttree 
201}
202}
203204
style
>

1

<
selecttree
2:data
="treedataselect"
3:defaultprops
=""4
:filterable
="adddirform.id"
5v-model
="adddirform.parentid"
>
6selecttree
>

1[2

17],
18 "label":null
,19 "name":"test"20}
21 ]

自己封裝element ui樹元件的過濾

前言 vue開發專案時用到了element ui的樹元件，但是發現一執行過濾事件，樹就全部都展開了，為了解決這個問題，只能自己先過濾數劇，再賦值給樹元件的data，就避免了一上來全部展開的尷尬。一 簡單版本 1 data 11 12 19 24 25 32 37 38 39 40 41methods...

elementUI下拉選擇select反應慢

最近遇到乙個很詭異的問題，elementui的select切換下拉選項，聯動另乙個下拉選項的選項資料時，變得很慢，改變選項後半天這個下拉框還不收起改變值，後面研究了一下，發現是change事件要執行完，下拉框才會收起改變值。但是我這個change事件要改變的是另乙個下拉框選項資料，這個資料有特別大上...

Element UI 的分頁元件

sizechange size 當使用者單擊任意頁碼或實現頁面跳轉時會觸發current page屬性的變化。currentchange current 擷取頁數 woekeralldata.slice pagenumber currentchangeindex 1 pagenumber curre...