穿梭框指的是一種常見的界面展示組件,可以方便用戶選擇多個選項中的部分。在Vue中,我們可以使用antd庫中自帶的Transfer組件來實現穿梭框的功能。
上面的代碼演示了如何在Vue中使用Transfer組件來實現穿梭框的功能。我們可以看到,在template標簽中,我們將Transfer組件放在了里面,并設置了一些屬性,例如dataSource屬性表示穿梭框中所有的可選項,targetKeys屬性表示已選項,titles屬性則表示兩個框的名稱。
在script標簽中,我們先通過import語句將Transfer組件引入項目中。然后在data方法中定義了一個空的dataSource數組和targetKeys數組。在mounted方法中,我們向dataSource數組中添加了一些示例數據。
在methods方法中,我們定義了handleChange方法,該方法會在用戶選擇某個選項時觸發,它會將已選項的值保存到targetKeys數組中。我們還定義了renderFormat方法,該方法用來格式化每個選項的展示形式。
在整個過程中,我們遵循了Vue的組件化思想,將穿梭框的每個功能都拆分成不同的方法和屬性,并在模板中進行組裝和調用。這也是Vue被廣泛喜愛的重要原因之一。