Vue EasyUI 樹

2020-06-24 11:51 更新

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

屬性列表

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

事件列表

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

方法列表

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

作用域

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

注:
- 繼承: None 。

使用方法

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

  • 參考圖例:

Tree

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號