mirror of https://github.com/ElemeFE/element
276 lines
8.5 KiB
Markdown
276 lines
8.5 KiB
Markdown
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
const generateData = _ => {
|
||
|
|
const data = [];
|
||
|
|
for (let i = 1; i <= 15; i++) {
|
||
|
|
data.push({
|
||
|
|
key: i,
|
||
|
|
label: `Option ${ i }`,
|
||
|
|
disabled: i % 4 === 0
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return data;
|
||
|
|
};
|
||
|
|
const generateData2 = _ => {
|
||
|
|
const data = [];
|
||
|
|
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
|
||
|
|
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
|
||
|
|
states.forEach((city, index) => {
|
||
|
|
data.push({
|
||
|
|
label: city,
|
||
|
|
key: index,
|
||
|
|
initial: initials[index]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return data;
|
||
|
|
};
|
||
|
|
const generateData3 = _ => {
|
||
|
|
const data = [];
|
||
|
|
for (let i = 1; i <= 15; i++) {
|
||
|
|
data.push({
|
||
|
|
value: i,
|
||
|
|
desc: `Option ${ i }`,
|
||
|
|
disabled: i % 4 === 0
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return data;
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
data: generateData(),
|
||
|
|
data2: generateData2(),
|
||
|
|
data3: generateData3(),
|
||
|
|
value1: [1, 4],
|
||
|
|
value2: [],
|
||
|
|
value3: [1],
|
||
|
|
value4: [],
|
||
|
|
filterMethod(query, item) {
|
||
|
|
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
|
||
|
|
},
|
||
|
|
renderFunc(h, option) {
|
||
|
|
return <span>{ option.key } - { option.label }</span>;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
handleChange(value, direction, movedKeys) {
|
||
|
|
console.log(value, direction, movedKeys);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
## Transfer
|
||
|
|
|
||
|
|
### Basic usage
|
||
|
|
:::demo Data is passed to Transfer via the `data` attribute. The data needs to be an object array, and each object should have these attributes: `key` being the identification of the data item, `label` being the displayed text, and `disabled` indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to `v-model`, and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the `v-model` with an array.
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-transfer
|
||
|
|
v-model="value1"
|
||
|
|
:data="data">
|
||
|
|
</el-transfer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
const generateData = _ => {
|
||
|
|
const data = [];
|
||
|
|
for (let i = 1; i <= 15; i++) {
|
||
|
|
data.push({
|
||
|
|
key: i,
|
||
|
|
label: `Option ${ i }`,
|
||
|
|
disabled: i % 4 === 0
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return data;
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
data: generateData(),
|
||
|
|
value1: [1, 4]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Filterable
|
||
|
|
|
||
|
|
You can search and filter data items.
|
||
|
|
|
||
|
|
:::demo Set the `filterable` attribute to `true` to enable filter mode. By default, if the data item `label` contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the `filter-method` attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-transfer
|
||
|
|
filterable
|
||
|
|
:filter-method="filterMethod"
|
||
|
|
filter-placeholder="State Abbreviations"
|
||
|
|
v-model="value2"
|
||
|
|
:data="data2">
|
||
|
|
</el-transfer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
const generateData2 = _ => {
|
||
|
|
const data = [];
|
||
|
|
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
|
||
|
|
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
|
||
|
|
states.forEach((city, index) => {
|
||
|
|
data.push({
|
||
|
|
label: city,
|
||
|
|
key: index,
|
||
|
|
initial: initials[index]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return data;
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
data2: generateData2(),
|
||
|
|
value2: [],
|
||
|
|
filterMethod(query, item) {
|
||
|
|
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Customizable
|
||
|
|
|
||
|
|
You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.
|
||
|
|
|
||
|
|
:::demo Use `titles`, `button-texts`, `render-content` and `footer-format` to respectively customize list titles, button texts, render function for data items, checking status texts in list footer. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-transfer
|
||
|
|
v-model="value3"
|
||
|
|
filterable
|
||
|
|
:left-default-checked="[2, 3]"
|
||
|
|
:right-default-checked="[1]"
|
||
|
|
:render-content="renderFunc"
|
||
|
|
:titles="['Source', 'Target']"
|
||
|
|
:button-texts="['To left', 'To right']"
|
||
|
|
:footer-format="{
|
||
|
|
noChecked: '${total}',
|
||
|
|
hasChecked: '${checked}/${total}'
|
||
|
|
}"
|
||
|
|
@change="handleChange"
|
||
|
|
:data="data">
|
||
|
|
<el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
|
||
|
|
<el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
|
||
|
|
</el-transfer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.transfer-footer {
|
||
|
|
margin-left: 20px;
|
||
|
|
padding: 6px 5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
const generateData = _ => {
|
||
|
|
const data = [];
|
||
|
|
for (let i = 1; i <= 15; i++) {
|
||
|
|
data.push({
|
||
|
|
key: i,
|
||
|
|
label: `Option ${ i }`,
|
||
|
|
disabled: i % 4 === 0
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return data;
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
data: generateData(),
|
||
|
|
value3: [1],
|
||
|
|
renderFunc(h, option) {
|
||
|
|
return <span>{ option.key } - { option.label }</span>;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
handleChange(value, direction, movedKeys) {
|
||
|
|
console.log(value, direction, movedKeys);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Prop aliases
|
||
|
|
|
||
|
|
By default, Transfer looks for `key`, `label` and `disabled` in a data item. If your data items have different key names, you can use the `props` attribute to define aliases.
|
||
|
|
:::demo The data items in this example do not have `key`s or `label`s, instead they have `value`s and `desc`s. So you need to set aliases for `key` and `label`.
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-transfer
|
||
|
|
v-model="value4"
|
||
|
|
:props="{
|
||
|
|
key: 'value',
|
||
|
|
label: 'desc'
|
||
|
|
}"
|
||
|
|
:data="data3">
|
||
|
|
</el-transfer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
const generateData3 = _ => {
|
||
|
|
const data = [];
|
||
|
|
for (let i = 1; i <= 15; i++) {
|
||
|
|
data.push({
|
||
|
|
value: i,
|
||
|
|
desc: `Option ${ i }`,
|
||
|
|
disabled: i % 4 === 0
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return data;
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
data3: generateData3(),
|
||
|
|
value4: []
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Attributes
|
||
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
||
|
|
|---------- |-------- |---------- |------------- |-------- |
|
||
|
|
| data | data source | array[{ key, label, disabled }] | — | [ ] |
|
||
|
|
| filterable | whether Transfer is filterable | boolean | — | false |
|
||
|
|
| filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
|
||
|
|
| filter-method | custom filter method | function | — | — |
|
||
|
|
| titles | custom list titles | array | — | ['List 1', 'List 2'] |
|
||
|
|
| button-texts | custom button texts | array | — | [ ] |
|
||
|
|
| render-content | custom render function for data items | function(h, option) | — | — |
|
||
|
|
| footer-format | texts for checking status in list footer | object{noChecked, hasChecked} | — | { noChecked: '${total} items', hasChecked: '${checked}/${total} checked' } |
|
||
|
|
| props | prop aliases for data source | object{key, label, disabled} | — | — |
|
||
|
|
| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |
|
||
|
|
| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |
|
||
|
|
|
||
|
|
### Slot
|
||
|
|
| Name | Description |
|
||
|
|
|------|--------|
|
||
|
|
| left-footer | content of left list footer |
|
||
|
|
| right-footer | content of right list footer |
|
||
|
|
|
||
|
|
### Events
|
||
|
|
| Event Name | Description | Parameters |
|
||
|
|
|---------- |-------- |---------- |
|
||
|
|
| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys |
|