1. 程式人生 > 程式設計 >解決ant design vue中樹形控制元件defaultExpandAll設定無效的問題

解決ant design vue中樹形控制元件defaultExpandAll設定無效的問題

頁面步驟:

1.設定a-tree標籤

2.預設的treeNodes值設定為空陣列

3.在mounted元件載入的時候給treeNodes的值賦值

結果:

設定defaultExpandAll無效,並不能展開所有節點

原因:

defaultExpandAll 僅在元件第一次渲染時有效,不僅僅tree元件,其它元件的defaultXXX值都是這個行為,

可以自行搜尋受控元件/非受控元件的概念。如果你想非同步獲取資料後展開全部結點,可以使用非受控方式:

https://codepen.io/lovefemi/pen/MMmRvx

解決ant design vue中樹形控制元件defaultExpandAll設定無效的問題

補充知識:Ant Design 中Tree踩坑

Tree中的api屬性有一個defaultExpandAll

解決ant design vue中樹形控制元件defaultExpandAll設定無效的問題

這個屬性只在第一次渲染的時候有效,也就是說使用者重新整理頁面後或者在這個頁面操作完這個元件後重新渲染的時候,這個值將不會有效。

解決辦法:

expandedKeys={help.treeIdData}

onExpand={this.onExpand}

使用expandedKeys屬性和onExpand事件進行資料的可控操作

初始化的時候獲取所有的TreeKeysr然後將它設定到expandedKeys屬性上,當用戶操作Tree節點的時候再觸發onExpand更新expandedKeys資料

具體思路參考https://reactjs.org/docs/forms.html 或者 https://github.com/ant-design/ant-design/issues/4145#issuecomment-27058096

以上這篇解決ant design vue中樹形控制元件defaultExpandAll設定無效的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。