1. 程式人生 > >使element-tree預設展開節點高亮

使element-tree預設展開節點高亮

element-ui tree元件預設節點高亮問題:

Element-ui tree的官方文件中給我們提供了一個介面:

default-expanded-keys陣列

我們可以將預設展開的節點的key放到陣列中,就可以預設展開

但是有一個比較難受的問題是預設展開的節點沒有渲染相應的樣式(高亮)

在工程中,我tree元件繫結的data一共有兩次重新整理

第一次是在本地讀取資料,將資料渲染出來

然後跟後臺請求資料,如果兩次資料不一致則改變頁面的資料,這樣能減少使用者等待的時間

在使用官方提供的函式setCurrentKey()來設定高亮的時候我發現總是不起作用的

後來發現在伺服器返回資料之前樣式是起作用的

換句話說就是通過setCurrentKey()函式可以給相應的節點加上樣式,但是要在data更新之後加上,否則data更新後就會被刷掉。因此網上有很多方法建議使用

this.$nextTick(function(){

    this.$refs.vuetree.setCurrentKey(firstLeafCode);  //"vuetree"是你自己在樹形控制元件上設定的 ref="vuetree" 的名稱

})

非同步的方法加上樣式,保證setCurrentKey()函式在data更新後呼叫

但是如果是像我這樣有兩次重新整理的需求,則需要在伺服器請求的資料到達之後再啟動非同步請求函式就可以給相應的節點加上高亮。如果this

.$nextTick()函式不起作用,在萬不得已的情況下可以考慮使用setTimeout()定時器來呼叫setCurrentKey()函式