带你走进iView的穿梭框-白红宇

带你走进iView的穿梭框

阅读量：4149 次

发布时间：2019-05-25

本文共 1140 字，大约阅读时间需要 3 分钟。

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

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

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

示例如下：

穿梭框高级用法，可以自定义两列的宽高、操作文案，以及底部自定义操作，更多配置见 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	列表为空

Transfer events

事件名	说明	返回值
on-change	选项在两栏之间转移时的回调函数	targetKeys, direction, moveKeys
on-selected-change	选中项发生变化时触发	sourceSelectedKeys, targetSelectedKeys