# hhComponent

**Repository Path**: kbzpc/hh-component

## Basic Information

- **Project Name**: hhComponent
- **Description**: 基于elementui封装的组件api
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-11-14
- **Last Updated**: 2023-08-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# HhTable表格
基于elementui的Table和Pagination 封装的组合型组件，两组件的大部分属性都可以用在本组件上

## 基本用法
html：
```html
<hh-table   :table-data="tableData"
		    :columns="columns"
		    :total="total"
		    @queryList="queryList"
		    :stripe="false"
		    style="height: 100%"
		    :pagination = "page"
		    :row-key="'roleCode'" ref="hhTable">
		    <!--自定义列-->
		    <el-table-column label="操作" width="200" align="left" slot="op" :key="'op' ">
				<template slot-scope="scope">
					<el-button type="text" @click="queryFinger(scope.row)">查看</el-button>
					<el-button type="text" @click="editFinger(scope.row)">编辑</el-button>
					<el-button type="text" @click="deleteFinger(scope.row)">删除</el-button>
				</template>
			</el-table-column>
</hh-table>
```
js
```javascript
 new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [],
                columns:[
                    {type:'index',label:"序号",fixed:true,width: 80,
                        index:function (index){
                            return _this.page.pageIndex  * _this.page.pageSize + index + 1
                        }},
                    {prop: 'monitorName',label: '字段1',fixed:true,minWidth: 180,
                        formatter: function (row, column, cellValue, index){
                            if(row.xxx==8){
                                return "-";
                            }else{
                                return cellValue;
                            }
                        }},
                    {prop: 'warnType',label: '字段2',fixed:true,minWidth: 160,
                        formatter: function (row, column, cellValue, index){
                            if (cellValue){
                                return _this.warnTypeTextList[cellValue];
                            }
                            return cellValue;
                        }},
                    {prop: 'warnTime',label: '时间',fixed:true,minWidth: 200,
                        formatter:function(row, column, cellValue, index){
                            if (cellValue){
								//格式化时间
                                return formatDate(cellValue,"yyyy-MM-dd HH:mm:ss");
                            }
                            return "";
                        }
                    },
					{
						slot:'op'
					}
                ],
                total: 0,
                page: {
                    pageIndex: 0,
                    pageSize: 10
                }
            }
        },
        created(){
        },
        mounted(){

        },
        methods:{
            queryList(page) {
                this.page = {
                    ...this.page,
                    ...page
                }
                let params = {
                    ...this.page,
                    monitorType,//其他类型参数
                }
                $.ajax({
                    url:ctx+"/xxx.do",
                    type : "post",
                    data :  params,
                    success:(data) => {
                        this.tableData = data.data;
                        this.total = data.total;
                    },
                    error:(err) => {

                    }
                })
            }
        }
    })
```
## HhTable 属性

|参数|类型|可选值|默认|注释|
|:----    |:-------    |:--- |---|------      |
|columns    |Array     |是 |[]  |      表格列名,属性详情见：column Attributes       |
|tableData |Array |是 |  []  |   表格数据  |
|stripe |Boolean |否   |  false  |   是否带斑马条纹    |
|rowKey     |String |否   | id   |    行数据的 Key，用来优化 Table 的渲染     |
|showPage|Boolean|否|true|是否显示分页|
|total|Number|是|0|表格数据总条数|
|pagination|Object|否|{pageIndex:0,pageSize:10}|分页参数|
|paginationProps|Object|否|-|分页其他配置项，属性详情见：paginationProps Attributes
|height|[String, Number]|否|calc(100% - 92px)|支持数字及px，不填时默认外部容器高度|
|mergeColumn|Array|否|-|需要合并列的name数组|
|spanMethod|Function|-|-|自定义合并列方法，不传时默认按mergeColumn列字段合并|
|redrawing|Boolean|否|true|表格数据或列数据变化时是否需要重新绘制|
|cellStyle|Function/Object|否|-|单元格的style的回调方法，也可以用固定的Object为所有单元格设置相同Style。
|emptyImg|String|否|-|用于表格无数据时显示图片，传图片所在路径

## column 属性
与[elementUi Table-column](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes "elementUi Table-column")大体相同

|参数|类型|可选值|默认|注释|
|:----    |:-------    |:--- |---|------      |
|type|String|selection/index/expand|-|对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮|
|index|Number, Function(index)|-|-|如果设置了 type=index，可以通过传递 index 属性来自定义索引|
|label|String|-|-|显示的标题|
|width|String|-|auto|对应列的宽度|
|min-width|String|-|auto|对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列|
|fixed|string, boolean|true, left, right|-|列是否固定在左侧或者右侧，true 表示固定在左侧|
|sortable|boolean, string|true, false, 'custom'|false|对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件|
|formatter|Function(row, column, cellValue, index)|-|-|用来格式化内容|
|show-overflow-tooltip|Boolean|-|false|当内容过长被隐藏时显示 tooltip|
|align|String|left/center/right|left|对齐方式|
|selectable|Function(row, index)|-|-|仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选|
|reserve-selection|Boolean|-|true|仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）|
|slot|String|-|-|自定义列名|

## paginationProps 属性
默认值如下：
```json
{
	// 每页显示个数选择器的选项设置
	pageSizes: [10, 50, 100, 200],
	// 分页组件布局，子组件名用逗号分隔
	pageLayout: 'total, sizes, prev, pager, next, jumper',
	// 分页器位置
	pagePosition: 'center'
}
```

## HhTable事件

|字段|参数|注释|
|:----    |:-------   |------      |
|cell-mouse-enter    |row, column, cell, event     |当单元格 hover 进入时会触发该事件 |
|selection-change|selection|当选择项发生变化时会触发该事件|
|query-list|pageIndex, pageSize|分页查询时触发该事件|
|select|selection, row|当用户手动勾选数据行的 Checkbox 时触发的事件|
|select-all|selection|当用户手动勾选全选 Checkbox 时触发的事件|
|header-dragend|newWidth, oldWidth, column, event|当拖动表头改变了列的宽度的时候会触发该事件|
|cell-mouse-enter|row, column, cell, event|当单元格 hover 进入时会触发该事件	|
|sort-change|{ column, prop, order }|当表格的排序条件发生变化的时候会触发该事件	|
## HhTable方法

|字段|参数|注释|
|:----    |:-------   |------      |
|doLayout   |—     |对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 |


# HhForm 表单
基于elementui的Form和各类型表单控件封装的组合型组件

## 基本用法
html：
```html
<hh-form :form-params="formParams" :form="formData" :rules="rules" ref="hhForm"  @change-select="changeSelect" class="hh-form" :disabled="formDisabled">
	<!--自定义列基础信息-->
	<template slot="monitor_mes_tab">
		<div class="monitor-tab1-box monitor-tab-text">
			基础信息
		</div>
	</template>
	<!--自定义列站点位置-->
	<template slot="monitor_address">
		<el-form-item  label="站点位置：" prop="address" span="20">
			<div class="row">
				<el-input  v-model="formData.address"  maxlength="250" style="flex:1" required
						  placeholder="请输入" clearable>
				</el-input>
				<el-button  style="margin-left: 24px" type="primary" plain  @click="openGisWin">查找坐标</el-button>
			</div>
		</el-form-item>
	</template>
	<!--自定义列数采仪信息-->
	<template slot="data_mes_tab">
		<div class="monitor-tab2-box monitor-tab-text">
			数采仪信息
		</div>
	</template>
</hh-form>
```
js：
```javascript
new Vue({
	el: '#app',
	data: function() {
		let repeatMn = (rule, value, callback) => {
			if(value){
				if(value.length>24){
					callback("MN号不能超过24个字符");
				}else{
					$.ajax({
						url:ctx+"/envirProtection/environline/monitor/judeRepeatMn.do",
						type : "post",
						data :  {mn: value},
						success:(data) => {
							if(data){
								callback(new Error('MN号已经存在！'));
							}else{
								callback();
							}
						},
						error:(err) => {
							callback();
						}
					})
				}

			}else{
				callback("请输入MN号");
			}
		}
		return {
			rules:{
				address:[
					{ required: true, message: '请输入站点位置', trigger: 'blur' },
				],
				mn:[
					{required: true,validator: repeatMn, trigger: 'blur'}
				]
			},
			formParams: [],
			formData:{
				useFlag:1,
				calcDataFlag:1,
				monitorType:monitorType
			},
			pageLoading:null,//加载中
			formDisabled:false,
		}
	},
	created(){
		//方便自定义弹框组件找到vue实例
		window.vm = this;
		_this = this;
		this.initData();
	},
	mounted(){

	},
	methods:{
		initData(){
			this.initFormItem();
			if(monitorType==7){
				delete this.formData['calcDataFlag']
			}
			if(monitorType==3){
				this.formData.airqRegionFlag = 1;
			}
		},
		initFormItem(){
			let formItem = [{
				wrapperCol:{ md: 20, sm: 20},
				slot:"monitor_mes_tab",
			},
			{
			/*wrapperCol:{ md: 20, sm: 20},//占整行*/
				label: '站点类型',
				type: 'select',
				required: true,
				valueField:"id",//下拉选项value值
				textField:"name",//下拉选项text值
				key:"monitorType",
				disabled:true,
				options:[{"id":3,"name":"大气"},{"id":5,"name":"地表水"},{"id":7,"name":"噪声"}]
			},
			{
				label: '站点名称',
				type: 'input',
				required: true,
				key:"monitorName",
				maxlength: 50,
			},
			{
				label: '行政区域',
				type: 'cascader',
				required: true,
				key:"region1",
				options:[],
				defaultProps:{expandTrigger: 'click',value:"code",label:"name",lazy: true,
					lazyLoad (node, resolve) {
						let { value } = node;
						if(!value){
							value = sysCode;
						}
						$.ajax({
							url:ctx+"/region/getRegionByCode.do",
							type : "post",
							data :  {code:value},
							success:(data) => {
								for (let i = 0; i < data.length; i++) {
									if(data[i].code.slice(-2)!="00"){
										data[i].leaf = true;
									}
								}
								resolve(data);
							},
							error:(err) => {
								resolve([]);
							}
						})
					}
				},
				filterable:true,//可搜索
			},
			{
				/*wrapperCol:{ md: 20, sm: 20},//占整行*/
				label: '站点级别',
				type: 'select',
				required: true,
				valueField:"name",//下拉选项value值
				textField:"name",//下拉选项text值
				key:"controlLevel",
				options:[{name:'国控'},{name:'省控'},{name:'市控'},{name:'其他'}]
			},
			{
				wrapperCol:{ md: 20, sm: 20},
				slot:"monitor_address",
			},
			{
				label: '经度',
				type: 'number',
				controls:false,
				required: true,
				min:-180,
				max:180,
				key:"longitude",
			},
			{
				label: '纬度',
				type: 'number',
				required: true,
				controls:false,
				min:-90,
				max:90,
				key:"latitude",
			},
			{
				label: '站点编码',
				type: 'input',
				key:"monitorNo",
				maxlength:50,
			}]
			if(monitorType==3){
				formItem.push({
					label: '环境空气功能类别',
					type: 'select',
					required: true,
					key:"airqType",
					valueField:"id",//下拉选项value值
					textField:"name",//下拉选项text值
					options:[{id:1,name:'一类区'},{id:2,name:'二类区'}]
				});
				formItem.push({
					label: '大气站类型',
					type: 'select',
					required: true,
					valueField:"id",//下拉选项value值
					textField:"name",//下拉选项text值
					key:"airqMonitorType",
					options:[{"id":1,"name":"标准站"},{"id":2,"name":"微站"},{"id":3,"name":"恶臭站"}]
				})
				formItem.push({
					label:"是否计算AQI",
					type: 'radio',
					key:"airqRegionFlag",
					required: true,
					options:[{value:1,text:"是"},{value:0,text:"否"}]
				})
			}else if(monitorType==5){
				//地表水
				formItem.push({
					label: '地表水环境功能区类别',
					type: 'select',
					required: true,
					key:"surfwaterType",
					valueField:"id",//下拉选项value值
					textField:"name",//下拉选项text值
					options:[{id:1,name:'Ⅰ类'},{id:2,name:'Ⅱ类'},{id:3,name:'Ⅲ类'},{id:4,name:'Ⅳ类'},{id:5,name:'Ⅴ类'},{id:6,name:'劣Ⅴ类'}]
				});
				formItem.push({
					label: '断面性质',
					type: 'select',
					required: true,
					valueField:"name",//下拉选项value值
					textField:"name",//下拉选项text值
					key:"sectionType",
					options:[{"name":"小流域"},{"name":"交界断面"},{"name":"饮用水源地"},{"name":"其他"}]
				})
				formItem.push({
					label: '监测水体',
					type: 'input',
					key:"monitorWater",
					maxlength: 100
				})
			}else{
				//噪声
				formItem.push({
					label: '声环境功能区类别',
					type: 'select',
					required: true,
					key:"noiseType",
					valueField:"id",//下拉选项value值
					textField:"name",//下拉选项text值
					options:[{id:1,name:'0类'},{id:2,name:'1类'},{id:3,name:'2类'},{id:4,name:'3类'},{id:5,name:'4a类'},{id:6,name:'4b类'}]
				});
			}
			let formItem1 = [{
				label:"是否启用",
				type: 'radio',
				key:"useFlag",
				required: true,
				wrap:true,
				options:[{value:1,text:"是"},{value:0,text:"否"}]
			},
			{
				label:"排序",
				type: 'number',
				key:"seqOrder",
				required: true,
				min:0
			},
			{
				wrapperCol:{ md: 20, sm: 20},
				slot:"data_mes_tab",
			},
			{
				label:"MN号",
				type: 'input',
				key:"mn",
				required: true,
				maxlength: 24,
			},
			{
				label:"实时上传频率(秒)",
				type: 'number',
				key:"currentRate",
				controls:false,
				precision:0,
				min: 0,
			},
			{
				label:"分钟上传频率(分钟)",
				type: 'number',
				controls:false,
				precision:0,
				key:"minuteRate",
				min: 0,
			},
			{
				label:"数采仪型号",
				type: 'input',
				key:"dmiType",
				maxlength: 50,
			},
			{
				label:"生产厂商",
				type: 'input',
				key:"dmiFactory",
				maxlength: 50,
			},
			{
				label:"设备出厂编号",
				type: 'input',
				key:"dmiNo",
				maxlength: 50,
			},
			{
				label:"存储容量",
				type: 'input',
				key:"capacity",
				maxlength:20,
			},
			{
				label:"SIM卡号",
				type: 'input',
				key:"simNo",
				maxlength:20,
			}]
			if(monitorType==3||monitorType==5){
				formItem1.push({
					label:"日数据获取方式",
					type: 'radio',
					key:"calcDataFlag",
					required: true,
					options:[{value:1,text:"数采仪上传"},{value:2,text:"小时数据计算"}]
				})
			}
			this.formParams = formItem.concat(formItem1);
		},
		//弹框保存回调，这里真正验证保存数据
		confirm(callback){
			this.$refs['hhForm'].validate((valid) => {
				if (!valid) {//表单未通过验证
					callback(false);
					return false;
				}
				//执行保存
				this.save(callback)
			});
		},
		save(callback){
		},
		close(){
			this.clearValidate();
		},
		clearValidate() {
			this.formData = {}
			this.$nextTick(() => {
				this.$refs.hhForm.clearValidate()
			})
		},
		openGisWin(){
			top.vm.openGisWin({},this.setAddr)
		},
		setAddr(e){
			this.formData.latitude = e.lat;
			this.formData.longitude = e.lng;
			this.$set( this.formData,"address", e.addr);
		},
		getOne(){
			$.ajax({
				url:ctx+"/envirProtection/fingerPrint/getFingerData.do",
				type : "post",
				data :  {id: id},
				success:(data) => {
					this.formData = data.waterLib
					this.eventDataList = data.waterLibData;
					this.fileList = [{status: 'success', name: "水质指纹图片", filePath: this.formData.picFilePath}]
					this.removeFiles = []
				},
				error:(err) => {

				}
			})
		},
		changeSelect(val, key) {
			console.log('🚀 ~ file: index.vue ~ line 197 ~ changeSelect ~ key', key)
			console.log('🚀 ~ file: index.vue ~ line 197 ~ changeSelect ~ val', val)
		},
		showLoading(text){
			this.pageLoading = parent.childVm.$loading({
				lock: true,
				text: text,
			});
		},
		showMsg(type,message){
			parent.childVm.showMsg(type,message);
		},
	}
})
```

## HhForm属性

|字段|类型|可选值|默认|注释|
|:----    |:-------    |:--- |---|------      |
|labelWidth    |String     |- | 205px |   表单label宽度          |
|formSize |String |medium / small / mini |    |   用于控制该表单内组件的尺寸  |
|form |Object |- |    |   表单数据对象  |
|formParams |Array |-   |    |   表单各控件对象配置，详情见[#formParams属性](#formParams属性 "#formParams属性")    |
|rules     |Object |-   |  -  |    表单验证规则     |
|disabled |Boolean     |-   | false  |   表单是否只读  |

## formParams 属性

|字段|类型|可选值|默认|注释|
|:----    |:-------    |:--- |---|------      |
|slot    |String     |- | - |   自定义列名          |
|required|Boolean|-|-|是否必填|
|label    |String     |- | - |   表单列名          |
|width    |String     |- | - |   表单列宽，若不设，同HhForm的labelWidth        |
|key    |String     |- | - |   列的标识        |
|type   |String     |[type可选值](#type可选值 "type可选值")| - |   列的控件类型       |
|disabled    |Boolean     |- | false |  控件是否禁用       |
|maxlength    |number     |- | - |  字符最大长度       |
|minlength    |number     |- | - |  字符最大小度        |
|placeholder    |String     |- | - |  输入框占位文本        |
|start    |String     |- | '00:00:00' |  可选开始时间段，只针对type=time  |
|end    |String     |- | '23:59:59' |  可选结束时间段，只针对type=time       |
|format    |String     |- |- |  时间格式化，只针对type=time、daterange 、datetimerange、date、datetime 、month |
|min|Number|-|-Infinity|输入的最小值，针对 type=number,naNumber|
|max|Number|-|Infinity|输入的最大值，针对 type=number,naNumber|
|controls|Boolean|-|true|是否使用控制按钮,同element-ui InputNumber的controls|
|precision|Number|-|-|数值精度,同element-ui InputNumber的controls|
|filterable|Boolean|-|false|是否可搜索,针对 type=select、cascader|
|multiple|Boolean|-|false|是否多选|
|options|Array|-|[]|下拉数据对象，针对 type=select、radio、cascader|
|textField|String|-|text|select下拉数据选项的标签字段名，针对 type=select、radio|
|valueField|String|-|value|select下拉数据选项的值字段名，针对 type=select、radio|
|showAllLevels|boolean|-|false|输入框中是否显示选中值的完整路径，针对 type=cascader|
|defaultProps|object|-|-|[配置选项](https://element.eleme.cn/#/zh-CN/component/cascader#props "配置选项")，针对 type=cascader|
|startPlaceholder|String|-|-|范围选择时开始日期的占位内容，针对 type=daterange、datetimerange|
|endPlaceholder|String|-|-|范围选择时开始日期的占位内容，针对 type=daterange、datetimerange|
|actText|String|-|-|switch 打开时的文字描述，针对 type=switch|

- ## type可选值

```json
	input
	time
	text
	password
	textarea
	number
	naNumber
	range
	select
	radio
	cascader
	daterange
	datetimerange
	date
	datetime
	month
	year
	switch
	autocomplete
```



## HhForm事件

|字段|参数|注释|
|:----    |:-------   |------      |
|change-select    |event, key     |当表单中存在select时，选中值发生变化时触发 |


## Form Methods
|字段|参数|注释|
|:----    |:-------   |------      |
|validate   |Function(callback: Function(boolean, object))     |对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise |
|validateField   |Function(props: array 或string, callback: Function(errorMessage: string))     |对部分表单字段进行校验的方法 |
|resetFields   |-     |对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 |
|clearValidate   |Function(props: array 或 string)     |移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 |

## 注意事项
- formParams数据对象中required为true时默认添加了必填校验，rules中就无需添加。若必填字段有其他校验逻辑时必须自行添加rules，包含必填校验！

# HhWin 全屏弹框
HhWin 在 Vue.prototype 添加了全局方法 $hhWin，因此在 vue instance 中可以采用本页面中的方式调用 HhWin。

## 调用示例
```javascript
	this.$hhWin({
    hhWinId:"hhWin1",
		title:"弹框标题",
		url:"add.jsp?type=add",
		showOp:true,//底部是否展示保存取消按钮
		showBack:false,//顶部是否需要返回按钮
		onClose:() => {
			//this.$message('点击返回');
		},
		onSave:(flag,e) => {//flag-保存是否成功
			//执行保存操作，数据保存失败也会调用
			if(flag){
				//保存成功后回调

			}
		}
	})
  //关闭某个弹框
  this.$hhWin.close("hhWin1",() => {
    //点击关闭弹框
  })
  //关闭所有弹框
  this.$hhWin.closeAll()
```
## HhWin属性
|字段|类型|可选值|默认|注释|
|:----    |:-------    |:--- |---|------      |
|hhWinId|String|-|hhWin1|同一页面多弹框时需传入|
|showOp|Boolean|-|false|是否需要底部操作按钮|
|showCancel|Boolean|-|true|是否需要底部取消按钮|
|showBack|Boolean|-|true|是否需要顶部返回按钮|
|cancelText|String|-|取消|自定义取消按钮名字|
|confirmText|String|-|保存|自定义保存按钮名字|
|onClose    |Function     |- | - |   自定义关闭回调          |
|onSave    |Function     |- | - |   自定义保存回调          |
|formData   |Object |-|-| 向url中页面传递的参数（数据量大时用此方法，子页面需在vue实例中提供setData方法接收）|

## HhWin Methods
|字段|参数|注释|
|:----    |:-------   |------      |
|close   |Function(String:hhWinId,callback: Function(e))     |单独关闭某个弹框，hhWinId为HhWin属性中hhWinId传递的值，callback为关闭的回调方法 |
|closeAll   |  -  |关闭当前页面中的所有弹框 |

# HhTransfer树形穿梭框
HhTransfer是基于element-UI的tree和input组件实现的
## 基本用法
```html
	<hh-tree-transfer ref="treeTransfer" :data-source.sync="dataSource" :default-checked-keys="defaultValue"
						@left-check-change="handleLeftCheckChange" @right-check-change="handleRightCheckChange"
						@change="handleChange" :isRadio="false" :filterable="true" :father-choose="false">
	</hh-tree-transfer>
```
```js
new Vue({
	el: '#app',
	data: function () {
		return {
			dataSource: [],
			defaultValue: [],
		}
	},
	created() {
		setTimeout(() => {
			this.dataSource = [{
				label: "A部门",
				id: "1",
				children: [{
					label: "小明",
					children: [],
					id: "1-1",
				},
					{
						label: "小红",
						children: [],
						id: "1-2",
					},
					{
						label: "小刚",
						children: [],
						id: "1-3",
					},
				],
			},
				{
					label: "B部门",
					id: "2",
					children: [{
						label: "小王",
						children: [],
						id: "2-1",
					},
						{
							label: "小李",
							children: [],
							id: "2-2",
						},
						{
							label: "小朱",
							children: [],
							id: "2-3",
						},
					],
				},]
		}, 5000)
	},
	methods: {
		handleChange(value, direction) {
			console.log('handleChange', value, direction)
		},
		handleLeftCheckChange(value, currentKeys) {
			console.log("handleLeftCheckChange:", value, currentKeys);
		},
		handleRightCheckChange(value, currentKeys) {
			console.log("handleRightCheckChange:", value, currentKeys);
		}
	}
})
```

## HhTransfer属性

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| width | 容器总宽度 | string | — | 800px |
| height | 容器总高度 | string | — | 500px |
| dataSource | 左侧树数据源 | array | — | [ ] |
| nodeKey | el-tree的key（必须唯一） | string | — | id |
| defaultProps | el-tree 配置项 | Object | — | { label: "label", children: "children" } |
| default-checked-keys | 左侧树默认选中穿梭节点 | array | — | [ ] |
| default-expanded-keys | 树默认展开节点 | array | — | [ ] |
| accordion | 是否每次只打开一个树节点 | boolean | — | false |
| render-after-expand | 是否在第一次展开某个树节点后才渲染其子节点 | boolean | — | true |
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点 | boolean | — | true |
| father-choose | 是否严格的遵循父子不互相关联的做法, 父节点是否可被选择穿梭 | boolean | — | false |
| isRadio | 左侧数据源是否为单选 | boolean | — | false |
| openAll| 树节点是否默认展开 | boolean | — | false |
| filterable | 是否可搜索 | boolean | — | false |
| filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容 |
| filter-method | 自定义搜索方法 | function | — | — |
| titles | 自定义标题 | array | — | ['源数据', '目标列表'] |
| button-texts | 自定义按钮文案 | array | — | [ ] |

### HhTransfer插槽

| name | 说明 |
|------|--------|
| left-footer | 左侧列表底部的内容 |
| right-footer | 右侧列表底部的内容 |

### HhTransfer方法

| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- |
| clearQuery | 清空某个面板的搜索关键词 | 'left' / 'right' / 'all'，指定需要清空的搜索框 |
| getTreeChecked | 获取左侧树全部选中状态 | 'leftKeys', 'leftHarfKeys', 'leftNodes', 'leftHalfNodes' |

### HhTransfer事件

| 事件名称      | 说明    | 回调参数      |
|---------- |-------- |---------- |
| change | 选项在两栏之间转移时触发 | 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组 |
| left-check-change | 左侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |
| right-check-change | 右侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |