最近遇到乙個很詭異的問題，elementui的select切換下拉選項，聯動另乙個下拉選項的選項資料時，變得很慢，改變選項後半天這個下拉框還不收起改變值，後面研究了一下，發現是change事件要執行完，下拉框才會收起改變值。但是我這個change事件要改變的是另乙個下拉框選項資料，這個資料有特別大上千條，這個在渲染的dom的時候很慢，因此影響了第乙個下拉框的改變響應。
後來想了乙個辦法，讓資料渲染好，只是控制他的顯示隱藏就好了，這個地方要注意不要用v-if v-else,要用v-show
vue中的 v-if 和 v-show 二者都可以動態的控制元素的隱藏和顯示，但是他們控制的原理是不同的
v-if
v-if 控制元素顯示或隱藏是把dom元素整個的渲染或者刪除，如果刪除，也就是頁面中不存在這個dom元素，以此達到隱藏的效果；
所以v-if在每次切換的時候都會重新建立或者銷毀元素，有較高的切換效能消耗；
而且v-if是惰性的，如果在初始渲染時條件為假，那就什麼也不做，直到條件第一次變為真時，需要渲染時才會開始渲染條件塊
v-show
v-show則是無論你的初始條件是什麼，元素都會被渲染，就是dom元素始終是存在的，v-show只是通過控制css中的display屬性來控制他的顯示或隱藏；
它擁有比較高的初始渲染消耗；
使用場景
如果元素需要進行比較頻繁的切換的話，推薦使用v-show，
如果很少用到切換，或者元素可能永遠都不會顯示出來的話，就使用v-if
注意：如果已經在css中明確寫出display : none 的話，在v-if中就算設定v-if為true也是不能讓元素顯示的，因為他沒辦法覆蓋或者修改掉css裡面的
display : none屬性，他只是會修改element style為display:""或者display:none
最後修改如下：
1. 去掉change事件
2. v-show控制顯示哪個對應的標籤資料，
ps: 如果有多個陣列呢？難道我要寫多個這樣的dom? 大家有沒有更好的處理方法？
elementUI下拉樹元件封裝
使用元件 popover 彈出框 tree 樹形控制項 和 input 輸入框 用法 1 新建乙個.vue檔案，貼上以下元件封裝的 完全可以使用 2 在頁面需要使用下拉樹的地方呼叫即可。1 import selecttree from components selecttree selecttree...
下拉選擇框
示例 id dropdownlist use class txt onchange selectsort this.value onmousedown this.classname colorfocus onblur this.classname txt value 全部 全部 option val...
element ui 下拉框載入事件寫法
根據搜尋條件去分頁載入選項列表，可以寫如下的指令 directives 使用的時候 select v loadmore loaddata option v for item,index in list key index label item.label value item.value async...