# transferTable 穿梭表格
TIP
TransferTable 穿梭表格 (此组件只在v1.0.11或以上版本有效 )
# transferTable 概述
双栏穿梭表格，常用于将多个项目从一边移动到另一边。
transferTable 支持 index、selection、text、money、card、select、date、time 类型的可编辑
# transferTable 代码示例
# 基础用法
基本用法，展示了 lColumns、rColumns、每行的渲染函数 lData rData 的用法。
# 配置title footer
通过设置属性 filterable 可以进行搜索，可以自定义搜索函数。
# 获取修改后的数据
直接显示可编辑框
不推荐使用太多复杂的可编辑，穿梭起来比较慢
# 控制loading动效
# 简单分页功能
# transferTable API
# TransferTable props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| lColumns | 左面板数据表头 | Array | [] |
| rColumns | 右面板数据表头 | Array | [] |
| lData | 左面板内表格数据 | Array | [] |
| rData | 右面板内表格数据 | Array | [] |
| lWidth | 左面板宽度 | Number | 500 |
| rWidth | 右面板宽度 | Number | 400 |
| height | 表格体面板高度（不包括头尾） | Number | 300 |
| lTitle | 左面板头部标题 | String | 源列表 |
| rTitle | 右面板头部标题 | String | 目的列表 |
| operations | 操作文案集合，顺序从上至下 | Array | [] |
| notDataText | 面板内容为空时显示 | String | 列表为空 |
| showTitle | 是否显示title | Boolean | true |
| stripe | 是否显示斑马线 | Boolean | false |
| border | 是否显示纵向边框 | Boolean | true |
| rowSelect | 多选时是否支持行选中,(仅在 type 为 selection 即多选下使用) | Boolean | false |
| highlight-row | 是否支持高亮选中的行，即单选 | Boolean | false |
| showEditInput | 是否直接显示编辑框 | Boolean | false |
| option | 配置 editgitd 中 type 为 select 的单元格的下拉选项，为 array 类型，其索引配置应和单元格列索引对应，具体见示例 | Array | -- |
| filterable | 是否显示搜索框(1.0.32及以后版本) | Boolean | false |
| filter-placeholder | 搜索框的占位(1.0.32及以后版本) | String | 请输入搜索内容 |
| filter-method | 自定义搜索函数，入参为 data 和 query，data 为项，query 为当前输入的搜索词(1.0.32及以后版本) | Function | 默认返回所有项 |
| noEdit | 搜索框内表格是否不可编辑，设置此属性穿梭框性能提升，不可配置可编辑属性(V1.0.43) | Boolean | false |
| beforeMove(keys,dire,isAll) | Function | 默认返回true | |
| hidelTable | 是否隐藏左侧 table(V1.0.49) | Boolean | false |
| hiderTable | 是否隐藏右侧 table(V1.0.49) | Boolean | false |
| hideOperations | 是否隐藏操作按钮(V1.0.49) | Boolean | false |
| itemHeight | 每列项高度（自己改了样式时配置，必须保持表格每项高度一致）(V1.0.64) | Number | 40 |
| loading | 动态控制左右面板的loading效果 v1.13.0 left： 控制是否开启左边面板的loading效果 right：控制是否开启右边面板的loading效果 | Object | { left: false, right: false } |
| pagination | 是否显示分页(V1.18.0) | Boolean | false |
| pageSize | 分页每页条数(V1.18.0) | Number | 10 |
# TransferTable events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-change | 选项在两栏之间转移时的回调函数 | rightData, direction, moveData 注意：第一项返回值的内容在1.0.32版本由原来的“转移条目前的右栏数据”改为“转移条目后的右栏数据” |
# TransferTable slot
| 名称 | 说明 |
|---|---|
| 无 | 自定义底部内容 |
# TransferTable slot
| 名称 | 使用方式 |
|---|---|
| getAllData | this.$refs.xxx.getAlldata() |
| clearSearch | this.$refs.xxx.clearSearch('left'/'right')表示左侧或者右侧搜索框清除 |
# transferTable column
列描述数据对象，是 columns 中的一项
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 列类型，可选值为 index、selection、text、money、card、select、date、time、 | String | - |
| title | 列头显示文字 | String | # |
| key | 对应列内容的字段名（key 关键字不与样式名重叠） | String | - |
| width | 列宽 | Number | - |
| align | 对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐 | String | left |
| rule | 单元格验证规则 ，如{ required: true, message: XXX }分别表示必填，字段,触发方式默认为blur | Object | -- |
| type 为 text 时 | 提供 placeholder，icon 属性字段，参考 input 组件 | -- | -- |
| type 为 textArea 时 | 提供 placeholder，row 属性字段，参考 input 组件 | -- | -- |
| type 为 money 时 | 提供 placeholder，integerNum，suffixNum，bigTips，isround 属性字段，参考 typefield组件 | -- | -- |
| type 为 card 时 | 卡号类型不提供属性字段配置，参考typefield组件 | -- | -- |
| type 为 select 时 | 提供 option,placeholder,notFoundText属 性字段，参考 select 组件， (option用法请参照示例)(目前只支持单选用法) | -- | -- |
| type 为 date 时 | 提供 placeholder，editable 属性字段，参考 date 组件， | -- | -- |
| type 为 time 时 | 提供 placeholder，editable,step 属性字段，参考 time 组件， | -- | -- |
| render | 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引。(当 render 和 type 都存在时，render 为追加添加，只设置 render 时，render 直接显示) | Function | - |
| typeWidth | 当设置 render 时，设置 type 类型的显示宽度（默认宽度为 70%,） | Number | -- |