iview 之 穿梭框 transfer

概述

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

说明

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

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

 

Transfer events

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