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