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