2020-11-04 10:30:14 +08:00
## トランスファー
### 基本的な使い方
2021-09-04 19:29:28 +08:00
2020-11-04 10:30:14 +08:00
:::demo データは `data` 属性を用いて転送に渡されます。データはオブジェクトの配列である必要があり、各オブジェクトは以下の属性を持つ必要があります。`key` はデータ項目の識別情報、`label` は表示されるテキスト、`disabled` はデータ項目が無効かどうかを示す。ターゲットリスト内の項目は `v-model` にバインドされた変数と同期しており、その変数の値はターゲット項目のキーの配列となる。したがって、ターゲットリストを初期状態で空にしたくない場合は、`v-model`を配列で初期化することができる。
2021-09-04 19:29:28 +08:00
2020-11-04 10:30:14 +08:00
```html
< template >
2021-09-04 19:29:28 +08:00
< el-transfer v-model = "value" :data = "data" > < / el-transfer >
2020-11-04 10:30:14 +08:00
< / template >
< script >
export default {
data() {
2021-09-04 19:29:28 +08:00
const generateData = (_) => {
const data = []
2020-11-04 10:30:14 +08:00
for (let i = 1; i < = 15; i++) {
data.push({
key: i,
2021-09-04 19:29:28 +08:00
label: `Option ${i}` ,
disabled: i % 4 === 0,
})
2020-11-04 10:30:14 +08:00
}
2021-09-04 19:29:28 +08:00
return data
}
2020-11-04 10:30:14 +08:00
return {
data: generateData(),
2021-09-04 19:29:28 +08:00
value: [1, 4],
}
},
}
2020-11-04 10:30:14 +08:00
< / script >
```
2021-09-04 19:29:28 +08:00
2020-11-04 10:30:14 +08:00
:::
### フィルタリング可能
データ項目の検索やフィルタリングができます。
:::demo フィルタモードを有効にするには、`filterable` 属性を `true` に設定する。デフォルトでは、`label` に検索キーワードが含まれている場合は検索結果に含まれる。また、`filter-method` 属性を用いて独自のフィルタメソッドを実装することもできる。これはメソッドを受け取り、キーワードが変更されるたびに検索キーワードと各データ項目をそれに渡す。あるデータ項目については、そのメソッドが真を返した場合、そのデータが検索結果リストに含まれる。
2021-09-04 19:29:28 +08:00
2020-11-04 10:30:14 +08:00
```html
< template >
< el-transfer
filterable
:filter-method="filterMethod"
filter-placeholder="State Abbreviations"
v-model="value"
2021-09-04 19:29:28 +08:00
:data="data"
>
2020-11-04 10:30:14 +08:00
< / el-transfer >
< / template >
< script >
export default {
data() {
2021-09-04 19:29:28 +08:00
const generateData = (_) => {
const data = []
const states = [
'California',
'Illinois',
'Maryland',
'Texas',
'Florida',
'Colorado',
'Connecticut ',
]
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
2020-11-04 10:30:14 +08:00
states.forEach((city, index) => {
data.push({
label: city,
key: index,
2021-09-04 19:29:28 +08:00
initial: initials[index],
})
})
return data
}
2020-11-04 10:30:14 +08:00
return {
data: generateData(),
value: [],
filterMethod(query, item) {
2021-09-04 19:29:28 +08:00
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1
},
}
},
}
2020-11-04 10:30:14 +08:00
< / script >
```
2021-09-04 19:29:28 +08:00
2020-11-04 10:30:14 +08:00
:::
### カスタマイズ可能
リストのタイトル、ボタンのテキスト、データ項目のレンダリング機能、リストフッターのステータステキストの確認、リストフッターの内容をカスタマイズすることができます。
2021-09-04 19:29:28 +08:00
:::demo `title` , `button-texts` , `render-content` , `format` を使って、リストのタイトル、ボタンのテキスト、データ項目のレンダリング機能、リストヘッダのステータステキストのチェックをそれぞれカスタマイズします。さらに、スコープ付きスロットを使ってデータ項目をカスタマイズすることもできます。リストのフッターの内容には、2 つの名前付きスロットが用意されています。`左フッター`と`右フッター`です。さらに、いくつかの項目を最初にチェックしたい場合は、`left-default-checked` と `right-default-checked` を使うことができます。最後に、この例では `change` イベントのデモを行います。このデモは JSX 構文をサポートしていないので、jsfiddle では実行できないことに注意してください。実際のプロジェクトでは、関連する依存関係が正しく設定されていれば `render-content` は動作します。
2020-11-04 10:30:14 +08:00
```html
< template >
2021-09-04 19:29:28 +08:00
< p style = "text-align: center; margin: 0 0 20px" >
Customize data items using render-content
< / p >
2020-11-04 10:30:14 +08:00
< div style = "text-align: center" >
< el-transfer
style="text-align: left; display: inline-block"
2020-11-20 23:02:15 +08:00
v-model="leftValue"
2020-11-04 10:30:14 +08:00
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:render-content="renderFunc"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change ="handleChange"
2020-11-20 23:02:15 +08:00
:data="data"
>
< template #left -footer >
< el-button class = "transfer-footer" size = "small" > Operation< / el-button >
< / template >
< template #right -footer >
< el-button class = "transfer-footer" size = "small" > Operation< / el-button >
< / template >
2020-11-04 10:30:14 +08:00
< / el-transfer >
2021-09-04 19:29:28 +08:00
< p style = "text-align: center; margin: 50px 0 20px" >
Customize data items using scoped slot
< / p >
2020-11-04 10:30:14 +08:00
< div style = "text-align: center" >
< el-transfer
style="text-align: left; display: inline-block"
2020-11-20 23:02:15 +08:00
v-model="rightValue"
2020-11-04 10:30:14 +08:00
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change ="handleChange"
2020-11-20 23:02:15 +08:00
:data="data"
>
< template #default ="{ option }" >
< span > {{ option.key }} - {{ option.label }}< / span >
< / template >
< template #left -footer >
< el-button class = "transfer-footer" size = "small" > Operation< / el-button >
< / template >
< template #right -footer >
< el-button class = "transfer-footer" size = "small" > Operation< / el-button >
< / template >
2020-11-04 10:30:14 +08:00
< / el-transfer >
< / div >
< / div >
< / template >
< style >
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
< / style >
< script >
export default {
data() {
2021-09-04 19:29:28 +08:00
const generateData = (_) => {
const data = []
2020-11-04 10:30:14 +08:00
for (let i = 1; i < = 15; i++) {
data.push({
key: i,
2021-09-04 19:29:28 +08:00
label: `Option ${i}` ,
disabled: i % 4 === 0,
})
2020-11-04 10:30:14 +08:00
}
2021-09-04 19:29:28 +08:00
return data
}
2020-11-04 10:30:14 +08:00
return {
data: generateData(),
2020-11-20 23:02:15 +08:00
rightValue: [1],
leftValue: [1],
2020-11-04 10:30:14 +08:00
renderFunc(h, option) {
2021-09-04 19:29:28 +08:00
return h('span', null, option.key, ' - ', option.label)
},
}
2020-11-04 10:30:14 +08:00
},
methods: {
handleChange(value, direction, movedKeys) {
2021-09-04 19:29:28 +08:00
console.log(value, direction, movedKeys)
},
},
}
2020-11-04 10:30:14 +08:00
< / script >
```
2021-09-04 19:29:28 +08:00
2020-11-04 10:30:14 +08:00
:::
### プロップのエイリアス
2021-09-04 19:29:28 +08:00
デフォルトでは、Transfer はデータ項目の中から `key` , `label` , `disabled` を探します。データ項目に異なるキー名がある場合、`props` 属性を使ってエイリアスを定義することができます。
2020-11-04 10:30:14 +08:00
:::demo この例のデータ項目には `key` や `label` がなく、代わりに `value` と `desc` があります。そのため、`key`と`label`にエイリアスを設定する必要があります。
2021-09-04 19:29:28 +08:00
2020-11-04 10:30:14 +08:00
```html
< template >
< el-transfer
v-model="value"
:props="{
key: 'value',
label: 'desc'
}"
2021-09-04 19:29:28 +08:00
:data="data"
>
2020-11-04 10:30:14 +08:00
< / el-transfer >
< / template >
< script >
export default {
data() {
2021-09-04 19:29:28 +08:00
const generateData = (_) => {
const data = []
2020-11-04 10:30:14 +08:00
for (let i = 1; i < = 15; i++) {
data.push({
value: i,
2021-09-04 19:29:28 +08:00
desc: `Option ${i}` ,
disabled: i % 4 === 0,
})
2020-11-04 10:30:14 +08:00
}
2021-09-04 19:29:28 +08:00
return data
}
2020-11-04 10:30:14 +08:00
return {
data: generateData(),
2021-09-04 19:29:28 +08:00
value: [],
}
},
}
2020-11-04 10:30:14 +08:00
< / script >
```
2021-09-04 19:29:28 +08:00
2020-11-04 10:30:14 +08:00
:::
### 属性
2021-09-04 19:29:28 +08:00
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------- | ----------------------------------------------------------------------- |
| model-value / v-model | バインディング値 | array | — | — |
| data | データソース | array[{ key, label, disabled }] | — | [ ] |
| filterable | 転送がフィルタリング可能かどうか | boolean | — | false |
| filter-placeholder | フィルタ入力のプレースホルダ | string | — | Enter keyword |
| filter-method | カスタムフィルタメソッド | function | — | — |
| target-order | ターゲットリストの要素の順序を指定します。`original` に設定されている場合、要素はデータソースと同じ順序を保ちます。`push` に設定すると、新しく追加された要素はボトムに押し出されます。`unshift` に設定すると、新たに追加された要素はトップに挿入される。 | string | original / push / unshift | original |
| titles | カスタムリストタイトル | array | — | ['List 1', 'List 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 | 左リストの初期チェックデータ項目のキー配列 | array | — | [ ] |
| right-default-checked | 右リストの初期チェックデータ項目のキー配列 | array | — | [ ] |
2020-11-04 10:30:14 +08:00
### スロット
2021-09-04 19:29:28 +08:00
| Name | Description |
| ------------ | ---------------------- |
| left-footer | 左リストフッターの内容 |
2020-11-04 10:30:14 +08:00
| right-footer | 右リストフッターの内容 |
### スコープされたスロット
2021-09-04 19:29:28 +08:00
| Name | Description |
| ---- | -------------------------------------------------------------------------- |
| — | データ項目のカスタムコンテンツ。スコープパラメータは { オプション } です。 |
2020-11-04 10:30:14 +08:00
### メソッド
2021-09-04 19:29:28 +08:00
| Method | Description | Parameters |
| ---------- | ---------------------------------------- | ---------------- |
2020-11-04 10:30:14 +08:00
| clearQuery | 特定のパネルのフィルタキーワードをクリア | 'left' / 'right' |
### イベント
2021-09-04 19:29:28 +08:00
| Event Name | Description | Parameters |
| ------------------ | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| change | 右側のリストでデータ項目が変更された場合にトリガーされる | key array of current data items in the right list, transfer direction (left or right), moved item keys |
| left-check-change | エンドユーザーが左リストのデータ項目のチェック状態を変更した場合にトリガーされます。 | key array of currently checked items, key array of items whose checked state have changed |
| right-check-change | エンドユーザーが右のリスト内の任意のデータ項目のチェック状態を変更した場合にトリガーされます。 | key array of currently checked items, key array of items whose checked state have changed |
