此组件为 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表示要编辑的节点对象|

​