# Transfer 穿梭框

# Transfer 概述

双栏穿梭选择框，常用于将多个项目从一边移动到另一边。

Transfer 组件主要基于以下四个 API 来使用：

:data ：总体数据，数组，每项为一个对象，且必须含有 key 值，组件基于此做索引。
:target-keys ：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。
:render-format ：每行数据显示的格式函数，默认优先显示 label 值，没有时显示 key 值，可以自己组合出需要的数据格式。
@on-change ：当点击转移按钮时，组件本身并不会转移数据，而是触发事件，由用户来操作数据。

示例：

export default {
  data() {
    return {
      data: [
        { key: "1", label: "内容1", disabled: false },
        { key: "2", label: "内容2", disabled: true },
        { key: "3", label: "内容3", disabled: false },
      ],
      targetKeys: ["1", "2"],
    };
  },
  methods: {
    render(item) {
      return item.key + ":" + item.label;
    },
    onChange(newTargetKeys) {
      this.targetKeys = newTargetKeys;
    },
  },
};

# Transfer 代码演示

# 基础用法

基本用法，展示了 data、target-keys、每行的渲染函数 render-format 以及回调函数 on-change 的用法。

# 搜索

通过设置属性 filterable 可以进行搜索，可以自定义搜索函数。

# 高级用法

穿梭框高级用法，可以自定义两列的宽高、操作文案，以及底部自定义操作，更多配置见 API。

# 自定义渲染行数据

可以通过 render-format 来渲染复杂的数据。

# Transfer API

# Transfer props

属性	说明	类型	默认值
data	数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。	Array	[]
targetKeys	显示在右侧框数据的key 集合	Array	[]
render-format	每行数据渲染函数，该函数的入参为 `data` 中的项	Function	默认显示label，没有时显示key
selected-keys	设置哪些项应该被选中	Array	[]
list-style	两个穿梭框的自定义样式	Object	{}
titles	标题集合，顺序从左至右	Array	['源列表', '目的列表']
operations	操作文案集合，顺序从上至下	Array	[]
filterable	是否显示搜索框	Boolean	false
filter-placeholder	搜索框的占位	String	请输入搜索内容
filter-method	自定义搜索函数，入参为 data 和 query，data 为项，query 为当前输入的搜索词	Function	默认搜索label
not-found-text	当搜索为空时显示的内容	String	无匹配内容
not-found-data	当列表为空时显示的内容	String	列表为空
showTitle	显示鼠标悬浮 title 文本 `使用场景：当render-format显示返回的是纯文本`	Boolean	false
render-title	自定义鼠标悬浮title文本 `前提条件：showTitle=true` `使用场景：当用户使用 render-format 显示html 不都是纯文本,或者用户需要自定义显示 title 文本`	Function	null

# Transfer 方法

方法名	说明	参数
moveToByOutside	外部调用该方法，控制节点去指定的面板 `v1.11.0`	`moveToObj`对象(详细看下方说明)

moveToObj = {
  direction: 'right'、'left', // move to 方向 right/left
  keys: 1、'4'、[1, 2, 3]、['1','2', '3'],  // 1. 需要移动的keys；2. 类型支持string/number/array string[]、number[]；3. string/number对应指定节点上的key类型
  disableMoved: false(默认)/true, //  禁止类节点（disabled = true）是否允许移动 默认：false 不允许移动
}

# Transfer events

事件名	说明	返回值
on-change	选项在两栏之间转移时的回调函数	targetKeys, direction, moveKeys
on-right-drag	右侧拖拽改变顺序后的回调函数，并返回改变后右侧对应的数据(1.0.17及其以上版本支持)	data
on-double-click	双击节点时触发 `v1.11.0`	{ `item`: 当前点击的节点; `direcPanel`: 当前点击节点触发的面板位置(`right/left)` }

# Transfer slot

名称	说明
无	自定义底部内容
operation	自定义操作内容