基礎用法
Transfer 的數據通過 data
屬性傳入。數據需要是一個對象數組,每個對象有以下屬性:key
為數據的唯一性標識,label
為顯示文本,disabled
表示該項數據是否禁止轉移。目標列表中的數據項會同步到綁定至 v-model
的變量,值為數據項的 key
所組成的數組。當然,如果希望在初始狀態時目標列表不為空,可以像本例一樣為 v-model
綁定的變量賦予一個初始值。

1 <template> 2 <el-transfer v-model="value1" :data="data"></el-transfer> 3 </template> 4 5 <script> 6 export default { 7 data() { 8 const generateData = _ => { 9 const data = []; 10 for (let i = 1; i <= 15; i++) { 11 data.push({ 12 key: i, 13 label: `備選項 ${ i }`, 14 disabled: i % 4 === 0 15 }); 16 } 17 return data; 18 }; 19 return { 20 data: generateData(), 21 value1: [1, 4] 22 }; 23 } 24 }; 25 </script>
可搜索
在數據很多的情況下,可以對數據進行搜索和過濾。
設置 filterable
為 true
即可開啟搜索模式。默認情況下,若數據項的 label
屬性包含搜索關鍵字,則會在搜索結果中顯示。你也可以使用 filter-method
定義自己的搜索邏輯。filter-method
接收一個方法,當搜索關鍵字變化時,會將當前的關鍵字和每個數據項傳給該方法。若方法返回 true
,則會在搜索結果中顯示對應的數據項。

1 <template> 2 <el-transfer 3 filterable 4 :filter-method="filterMethod" 5 filter-placeholder="請輸入城市拼音" 6 v-model="value2" 7 :data="data2"> 8 </el-transfer> 9 </template> 10 11 <script> 12 export default { 13 data() { 14 const generateData2 = _ => { 15 const data = []; 16 const cities = ['上海', '北京', '廣州', '深圳', '南京', '西安', '成都']; 17 const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']; 18 cities.forEach((city, index) => { 19 data.push({ 20 label: city, 21 key: index, 22 pinyin: pinyin[index] 23 }); 24 }); 25 return data; 26 }; 27 return { 28 data2: generateData2(), 29 value2: [], 30 filterMethod(query, item) { 31 return item.pinyin.indexOf(query) > -1; 32 } 33 }; 34 } 35 }; 36 </script>
可自定義
可以對列表標題文案、按鈕文案、數據項的渲染函數、列表底部的勾選狀態文案、列表底部的內容區等進行自定義。
可以使用 titles
、button-texts
、render-content
和 format
屬性分別對列表標題文案、按鈕文案、數據項的渲染函數和列表頂部的勾選狀態文案進行自定義。對於列表底部的內容區,提供了兩個具名 slot:left-footer
和 right-footer
。此外,如果希望某些數據項在初始化時就被勾選,可以使用 left-default-checked
和 right-default-checked
屬性。最后,本例還展示了 change
事件的用法。注意:由於 jsfiddle 不支持 JSX 語法,所以本例在 jsfiddle 中無法運行。但是在實際的項目中,只要正確地配置了相關依賴,就可以正常運行。

1 <template> 2 <el-transfer 3 v-model="value3" 4 filterable 5 :left-default-checked="[2, 3]" 6 :right-default-checked="[1]" 7 :render-content="renderFunc" 8 :titles="['Source', 'Target']" 9 :button-texts="['到左邊', '到右邊']" 10 :format="{ 11 noChecked: '${total}', 12 hasChecked: '${checked}/${total}' 13 }" 14 @change="handleChange" 15 :data="data"> 16 <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button> 17 <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button> 18 </el-transfer> 19 </template> 20 21 <style> 22 .transfer-footer { 23 margin-left: 20px; 24 padding: 6px 5px; 25 } 26 </style> 27 28 <script> 29 export default { 30 data() { 31 const generateData = _ => { 32 const data = []; 33 for (let i = 1; i <= 15; i++) { 34 data.push({ 35 key: i, 36 label: `備選項 ${ i }`, 37 disabled: i % 4 === 0 38 }); 39 } 40 return data; 41 }; 42 return { 43 data: generateData(), 44 value3: [1], 45 renderFunc(h, option) { 46 return <span>{ option.key } - { option.label }</span>; 47 } 48 }; 49 }, 50 51 methods: { 52 handleChange(value, direction, movedKeys) { 53 console.log(value, direction, movedKeys); 54 } 55 } 56 }; 57 </script>
數據項屬性別名
默認情況下,Transfer 僅能識別數據項中的 key
、label
和 disabled
字段。如果你的數據的字段名不同,可以使用 props
屬性為它們設置別名。
本例中的數據源沒有 key
和 label
字段,在功能上與它們相同的字段名為 value
和 desc
。因此可以使用props
屬性為 key
和 label
設置別名。

1 <template> 2 <el-transfer 3 v-model="value4" 4 :props="{ 5 key: 'value', 6 label: 'desc' 7 }" 8 :data="data3"> 9 </el-transfer> 10 </template> 11 12 <script> 13 export default { 14 data() { 15 const generateData3 = _ => { 16 const data = []; 17 for (let i = 1; i <= 15; i++) { 18 data.push({ 19 value: i, 20 desc: `備選項 ${ i }`, 21 disabled: i % 4 === 0 22 }); 23 } 24 return data; 25 }; 26 return { 27 data3: generateData3(), 28 value4: [] 29 }; 30 } 31 }; 32 </script>
Attributes
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
data | Transfer 的數據源 | array[{ key, label, disabled }] | — | [ ] |
filterable | 是否可搜索 | boolean | — | false |
filter-placeholder | 搜索框占位符 | string | — | 請輸入搜索內容 |
filter-method | 自定義搜索方法 | function | — | — |
target-order | 右側列表元素的排序策略:若為 original ,則保持與數據源相同的順序;若為 push ,則新加入的元素排在最后;若為 unshift ,則新加入的元素排在最前 |
string | original / push / unshift | original |
titles | 自定義列表標題 | array | — | ['列表 1', '列表 2'] |
button-texts | 自定義按鈕文案 | array | — | [ ] |
render-content | 自定義數據項渲染函數 | function(h, option) | — | — |
format | 列表頂部勾選狀態文案 | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
props | 數據源的字段別名 | object{key, label, disabled} | — | — |
left-default-checked | 初始狀態下左側列表的已勾選項的 key 數組 | array | — | [ ] |
right-default-checked | 初始狀態下右側列表的已勾選項的 key 數組 | array | — | [ ] |
Slot
name | 說明 |
---|---|
left-footer | 左側列表底部的內容 |
right-footer | 右側列表底部的內容 |
Methods
方法名 | 說明 | 參數 |
---|---|---|
clearQuery | 清空某個面板的搜索關鍵詞 | 'left' / 'right',指定需要清空的面板 |
Events
事件名稱 | 說明 | 回調參數 |
---|---|---|
change | 右側列表元素變化時觸發 | 當前值、數據移動的方向('left' / 'right')、發生移動的數據 key 數組 |