E6-tree NPM | npm.io

此组件为 e6-tree 组件，基于vue封装的树形列表组件，目前已上传npm和git，可直接安装/下载使用。如有其他需求，请联系作者进行扩展和修改。

1.安装

npm i e6-tree

2.用法

main.js 中进行导入和使用：

import e6Tree from 'e6-tree'  
Vue.use(e6Tree);

App.vue 对应页面中，直接使用，方式如下：

<e6-tree 
	:list.sync='ztreeDataSource' 
	:func='nodeClick' 
	:expand='expandClick' 
	:contextmenu='contextmenuClick'
	:treeContextMenu="treeContextMenuClick"
	:cameraClick="cameraClick"
	:lcdClick="lcdClick"
	:nodeEditSub="nodeEditSub"
	:issingleleaf="true"
	:is-check='true' 
	:is-radio='false' 
	:is-open='true'
	ref="e6tree">
</e6-tree>

我是图片

3.数据格式

参数	类型	是否必须	默认值	说明
id	Number	是	无	节点id
pid	Number	是	无	父节点id,此组件限制，根节点的 pid=0
label	String	是	无	节点名称
disabled	Boolean	是	无	true-根、支节点，false-叶子节点
children	Array	是	[]	子节点数组，数据格式和父节点无异
Type	Number	否	无	节点是否是共享车辆（被动），无修改权限，显示图标
IsHaveLock	Number	否	无	是否有门锁：0--无，1--有
IsCamera	Number	否	无	是否有摄像头：0--无，1--有
IsOil	Number	否	无	是否有油尺：0--无，1--有
IsTemp	Number	否	无	是否有温度探头：0--无，1--有
IsLCD	Number	否	无	是否有LCD：0--无，1--有
IsTrailer	Number	否	无	是否是牵引车：0--否，1--是
IsHumidity	Number	否	无	是否有湿度：0--无，1--有

4.属性

参数	类型	是否必须	默认值	说明
list.sync	Array	是	[]	树数据源
is-check	Boolean	否	false	是否是多选树
is-radio	Boolean	否	false	是否是单选树
issingleleaf	Boolean	否	false	是否只返回 diabled=true 的节点数据
is-open	Boolean	否	false	初始化时是否展开树
isHoverEditer	Boolean	否	false	是否需要hover节点时显示编辑操作
selectAndCheck	Boolean	否	false	是否点击节点选中同时勾选/取消勾选
disabledNoCheck	Boolean	否	false	是否在 disabled == true 时，不显示勾选框

5.事件

以下方法，都不是必须的，在需要的时候再进行绑定即可

事件	说明	参数
func	节点点击回调方法	节点点击时触发该方法，包含3个参数，func(节点对象, 节点父节点对象, 树对象)
chkfunc	节点勾选状态变化回调方法	点击checkbox/radiobox使得节点勾选状态变化时触发该方法，包含3个参数，chkfunc(节点对象, 选中状态, 树对象)
expand	展开/收起回调方法	鼠标点击导致树展开收起发生变化时触发该方法，包含1个参数，expand(节点对象)，返回点击的节点对象
contextmenu	节点右键回调方法	树上任意节点右键点击回调方法，包含2个参数，contextmenu(event, 节点对象)
treeContextMenu	非节点右键回调方法	树区域非节点（空白区域）右键点击回调方法，包含1个参数，treeContextMenu(event)
cameraClick	摄像头点击回调方法	包含1个参数，cameraClick(节点对象)
lcdClick	LCD点击回调方法	包含1个参数，lcdClick(节点对象)
nodeEdit	编辑节点回调方法	包含1个参数，nodeEdit(node)，编辑的节点对象
nodeDelete	删除节点回调方法	包含1个参数，nodeDelete(node)，删除的节点对象
addNode	添加节点回调方法	包含1个参数，addNode(node)，当前点击添加的节点对象

6.API方法

调用API的方法
this.$refs.树组件名称.API方法名(参数1,参数2...)

方法名	说明	参数
queryTreeNodeByName	按名称查询	接收最多5个参数，依次为(name, isLeaf, isSel, isFilter, isShowChild),name为必传参数;isLeaf表示是否只查询叶子节点，默认false, 非必传;isSel表示是否设置选中背景，默认false, 非必传；isFilter表示查询是否需要过滤显示数据，默认false，非必传；isShowChild表示过滤数据时是否需要显示查找元素的子节点, 在isFilter=true时生效，默认true，非必传；返回1个参数，为找到的节点数据数组，平级关系
queryTreeNodeByID	按id查询	接收最多5个参数，依次为(ID, isLeaf, isSel, isFilter, isShowChild),ID为必传参数;isLeaf表示是否只查询叶子节点，默认false, 非必传;isSel表示是否设置选中背景，默认false, 非必传；isFilter表示查询是否需要过滤显示数据，默认false，非必传；isShowChild表示过滤数据时是否需要显示查找元素的子节点, 在isFilter=true时生效，默认true，非必传；返回1个参数，为找到的节点数据数组，平级关系
setNodeSelect	设置单个节点背景选中	接收最多2个参数，依次为(node, isSelect),node为必传参数;isSelect表示是否选中背景，默认false, 非必传; 无返回
setAllNodeSelect	设置全部节点背景选中	接收最多1个参数，isSelect，默认false，非必传，false--取消所有节点选中背景，true--选中所有节点背景；无返回
letEleInView	将节点移动到可见区域	接收最多2个参数，依次为(objId, isShowCur),objId为节点ID，必传参数；isShowCur，默认true，非必传；无返回
setNodeCheck	设置单个节点勾选	接收最多2个参数，依次为(node, check),node为必传参数，节点对象；check表示是否勾选，默认true，非必传；无返回
setAllNodeCheck	设置所有节点勾选状态	接收最多1个参数，check表示是否勾选，默认true，非必传；无返回
getAllNodes	获取所有节点	接收最多2个参数，依次为(isCheck,isLeaf)isCheck表示返回是否选中的节点，默认true,即勾选的节点，false则为未勾选的节点；isLeaf表示是否只包含叶子节点，默认false，true则返回叶子节点+非叶子节点；返回一个对象{data:节点对象数组,ids:节点id数组,names:节点名称数组}，均做了去重处理，可能数量不一样多, data可能返回[]空数组，所以建议使用之前进行判断
setAllNodexExpand	全部展开/折叠	接收最多1个参数，isExpand表示是否展开，true为展开，false为折叠；无返回
setNodeEdit	设置节点为编辑状态	接收1个参数，node表示要编辑的节点对象