codecamp

Vue EasyUI 树

树（ Tree ）在网页中以树形结构显示分层数据。树（ Tree ）向用户提供展开、折叠、拖拽、编辑和异步加载功能。

属性列表

名称	数据类型	作用描述	默认值
data	array	要加载的数据。	[ ]
selectLeafOnly	boolean	是否只选择叶节点。	false
checkbox	boolean	是否在每个节点前显示复选框。	false
cascadeCheck	boolean	是否进行级联检查。	true

事件列表

名称	参数	作用描述
selectionChange	node	选择节点时触发。
nodeClick	node	单击节点时触发。
nodeDblClick	node	双击节点时触发。
nodeExpand	node	在展开节点时触发。
nodeCollapse	node	当节点被折叠时触发。
nodeCheck	node	检查节点时触发。
nodeUncheck	node	当节点未选中时触发。
checkChange	nodes	更改选中节点时触发。
nodeContextMenu	node, originalEvent	右击节点时触发。
editBegin	{node, originalValue}	在开始编辑节点时触发。
editEnd	{node, originalValue}	结束编辑节点时触发。
editCancel	{node, originalValue}	取消编辑节点时触发。

方法列表

名称	参数	返回值	作用描述
selectNode	node	void	选择一个节点。
checkNode	node	void	检查节点。
uncheckNode	node	void	取消一个节点。
uncheckAllNodes	node	void	取消所有节点。
doFilter	q	void	执行筛选操作。
beginEdit	node	void	开始编辑节点。
endEdit	node	void	结束当前编辑节点。
cancelEdit	node	void	取消当前编辑节点。

作用域

名称	参数	作用描述
default	node	节点作用域。
editor	node	编辑节点作用域。

注：
- 继承： None 。

使用方法

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

参考图例：

Tree

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }