Vue EasyUI 樹

2020-06-24 11:51 更新

樹（ Tree ）在網(wǎng)頁中以樹形結構顯示分層數(shù)據(jù)。 樹（ Tree ）向用戶提供展開、折疊、拖拽、編輯和異步加載功能。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認值
data array 要加載的數(shù)據(jù)。 [ ]
selectLeafOnly boolean 是否只選擇葉節(jié)點。 false
checkbox boolean 是否在每個節(jié)點前顯示復選框。 false
cascadeCheck boolean 是否進行級聯(lián)檢查。 true

事件列表

名稱 參數(shù) 作用描述
selectionChange node 選擇節(jié)點時觸發(fā)。
nodeClick node 單擊節(jié)點時觸發(fā)。
nodeDblClick node 雙擊節(jié)點時觸發(fā)。
nodeExpand node 在展開節(jié)點時觸發(fā)。
nodeCollapse node 當節(jié)點被折疊時觸發(fā)。
nodeCheck node 檢查節(jié)點時觸發(fā)。
nodeUncheck node 當節(jié)點未選中時觸發(fā)。
checkChange nodes 更改選中節(jié)點時觸發(fā)。
nodeContextMenu node,  originalEvent 右擊節(jié)點時觸發(fā)。
editBegin {node, originalValue} 在開始編輯節(jié)點時觸發(fā)。
editEnd {node, originalValue} 結束編輯節(jié)點時觸發(fā)。
editCancel {node, originalValue} 取消編輯節(jié)點時觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
selectNode node void 選擇一個節(jié)點。
checkNode node void 檢查節(jié)點。
uncheckNode node void 取消一個節(jié)點。
uncheckAllNodes node void 取消所有節(jié)點。
doFilter q void 執(zhí)行篩選操作。
beginEdit node void 開始編輯節(jié)點。
endEdit node void 結束當前編輯節(jié)點。
cancelEdit node void 取消當前編輯節(jié)點。

作用域

名稱 參數(shù) 作用描述
default node 節(jié)點作用域。
editor node 編輯節(jié)點作用域。

注：
- 繼承： None 。

使用方法

  1. <Tree :data="data" @selectionChange="selection=$event"></Tree>
  2. <p v-if="selection">選擇: {{selection.text}}</p>

  • 參考圖例：

Tree

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號