Transfer 穿梭框

兩個清單之間批次搬移項目,左右兩邊同時看得到。使用 Element Plus 的 el-transfer。

設計準則

• 適合「從一堆候選裡挑一批、且需要同時看到已選/未選」的場景(報表欄位配置、群組成員管理)
• 選項 10~200 個之間最合適:更少直接用 Checkbox,更多改用表格 + 搜尋
• titles 一定要改成有意義的標題(「可用欄位/報表欄位」),預設的「列表 1/列表 2」等於沒說
• 選項超過一屏加 filterable
• 需要體現「已選順序」的場景(欄位排序)要另外處理,穿梭框本身不管順序

基本用法

loading

可搜尋

選項多時加 filterable;button-texts 給按鈕加上動詞:

loading

Do / Don't

✅ Do	❌ Don't
批次挑選、兩邊都要看到	只選 1 個也用穿梭框(用 select)
titles 寫「可用欄位/報表欄位」	用預設「列表 1/列表 2」
超過一屏加 filterable	讓使用者在 100 個選項裡慢慢捲

給工程師

完整 API 見 Element Plus Transfer 文件。 本站規範優先於 EP 文件中的視覺建議。