# 功能描述
树形控件操作(注意不是树形控件选择)。
功能列表：
(1) 支持配置数据源。
(2) 支持增/删/改/查等功能。
# 属性props
本控件props属性有3部分组成，分别为：1.控件本身属性 2.数据源属性 3.element的Tree树形控件属性
1.控件本身属性
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| title | 否 | String | 控件顶部标题 | ||
| Height | 否 | String | 控件高度 | ||
| width | 否 | String | 控件宽度 | ||
| initValue | 否 | String, Number | 初始化值，即默认值 | ||
| value | 否 | String, Number, Boolean, Array | 接受外部v-model传入的值 | ||
| showTopButton | 否 | Boolean | true | true/false | 是否在表格顶部显示操作按钮 |
| filter | 否 | Boolean | true | true/false | 是否需要过滤搜索框 |
2.数据源属性见data-source数据源的props属性
3.element的Tree树形控件属性见element的Tree树形控件 (opens new window)的Attributes
# 插槽slot
扩展插槽
| 插槽名 | 界面位置及说明 | 参数 |
|---|---|---|
| add | 顶部的操作按钮区域中新增按钮位置(有新增权限时才显示)，替换默认的新增按钮 | |
| edit | 顶部的操作按钮区域中编辑按钮位置(有编辑权限时才显示)，替换默认的编辑按钮 | |
| save | 表格顶部的操作按钮区域中保存按钮位置(在新增或编辑状态时才显示)，替换默认的保存按钮 | |
| cancel | 表格顶部的操作按钮区域中取消按钮位置(在新增或编辑状态时才显示)，替换默认的取消按钮 | |
| del | 顶部的操作按钮区域中删除按钮位置(有删除权限时才显示)，替换默认的删除按钮 | |
| see | 顶部的操作按钮区域中查看按钮位置(有查看权限时才显示)，替换默认的查看按钮 | |
| topButtonArea | 顶部的操作按钮尾部区域 | row:该模块的权限按钮集合 参数action:当前操作类型 |
| top | 操作按钮区域下面，表格数据行上面的区域 | row:当前选中行数据，action:当前行是否查看状态，actionType:当前行的操作状态 |
| dialog | 表格对话框。参数row:当前行JSON数据；参数action:当前行是否查看状态；参数actionType：当前行的操作状态 |
# 方法Methods
本控件方法包含:1.控件本身方法 2.数据源方法 3.element的tree方法
1.控件本身方法
| 方法名 | 功能说明 | 参数说明 | 返回值类型 | 其它说明 |
|---|---|---|---|---|
| getInstance() | 获得element的tree控件的实例 | |||
| doAdd(afterCallback) | 新增行数据 | afterCallback:回调函数，回调参数为dataSource中的currEditSelection结构体 | 如果配置有x-dialogedit，则弹出新增对话框，否则在表格内部新增，同时操作类型actionType状态变为add,回调完成后向父组件发送afterAdd事件，参数等同于afterCallback回调参数。 | |
| doSee(index,afterCallback) | 查看选中的表格行数据 | index:为当前行(可为null) afterCallback:回调函数，回调参数为dataSource中的currEditSelection结构体 | 如果配置有x-dialogedit，则弹出查看对话框，同时操作类型actionType状态变为see,回调完成后向父组件发送afterSee事件，参数等同于afterCallback回调参数。 | |
| doEdit(index,afterCallback) | 修改选中的表格行数据 | index:为当前行(可为null) afterCallback:回调函数，回调参数为dataSource中的currEditSelection结构体 | 如果配置有x-dialogedit，则弹出编辑对话框，同时操作类型actionType状态变为edit,回调完成后向父组件发送afterEdit事件，参数等同于afterCallback回调参数。 | |
| doSave(beforeCallback,afterCallback) | 保存数据 | beforeCallback:保存前的回调,参数为dataSource中的currEditSelection结构体和actionType(操作类型) afterCallback:保存后的回调，参数为:res(服务器返回数据), action(当前操作类型), currEditSelection(dataSource中的currEditSelection结构体), diff(差异数据) | 回调完成后向上级组件发送afterSave事件，参数等同于afterCallback回调参数。 | |
| doDelete(beforeCallback,afterCallback) | 删除选中的表格行数据 | beforeCallback:删除前的回调，参数为saveJson(发送到后端的json数据)和actionType(操作类型) afterCallback:删除后的回调，参数为:res(服务器返回数据), rows(要删除的原始行数据) | 回调完成后向上级组件发送afterDelete事件，参数等同于afterCallback回调参数。 | |
| doCancel(beforeCallback, afterCallback) | 取消当前的新增或编辑操作 | beforeCallback:删除前的回调，参数为dataSource中的currEditSelection结构体和actionType(操作类型) afterCallback:删除后的回调,，回调参数为dataSource中的currEditSelection结构体和当前的操作类型actionType | 回调完成后向上级组件发送afterCancel事件，参数等同于afterCallback回调参数。 |
2.数据源方法见data-source数据源的方法
3.element的Tree树形控件属性见element的Tree树形控件 (opens new window)的方法
# 例1: 树形结构显示并编辑
详细例子参见源码的字典设置（sys_dic）模块
<x-tree ref="tree" default-expand-all highlight-current :filter="false" node-key="uuid" :dataSource="{head:{module:'sys_dic'},option:{privilege:false,keyField:false},query:{fields:'uuid,_pid,code,name,type,sort',order:'type asc,_pid asc,sort asc'},data:{tree:2,option:{pid:'_pid',id:'uuid',label:'name'}},save:{isReload: false}}"/>
1