ant-design-vue/components/transfer/index.en-US.md

37 lines
2.9 KiB
Markdown
Raw Normal View History

2018-04-06 16:20:45 +00:00
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
2018-04-07 02:32:13 +00:00
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}\] | \[] |
2018-12-05 12:00:13 +00:00
| disabled | Whether disabled transfer | boolean | false |
2018-04-06 16:20:45 +00:00
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | |
2018-04-07 02:32:13 +00:00
| footer | customize the progress dot by setting a scoped slot | slot="footer" slot-scope="props" | |
| lazy | property of vc-lazy-load for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` |
2018-04-06 16:20:45 +00:00
| listStyle | A custom CSS style used for rendering the transfer columns. | object | |
2018-12-05 12:00:13 +00:00
| locale | i18n text including filter, empty text, item unit, etc | object | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` |
2019-03-28 12:56:06 +00:00
| operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] |
2018-04-07 02:32:13 +00:00
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) | |
2018-04-06 16:20:45 +00:00
| selectedKeys | A set of keys of selected items. | string\[] | \[] |
| showSearch | If included, a search box is shown on each column. | boolean | false |
| targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] |
| titles | A set of titles that are sorted from left to right. | string\[] | - |
2018-04-07 02:32:13 +00:00
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| change | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void | |
| scroll | A callback function which is executed when scroll options list | (direction, event): void | |
| search | A callback function which is executed when search field are changed | (direction: 'left'\|'right', value: string): void | - |
2018-04-07 02:32:13 +00:00
| selectChange | A callback function which is executed when selected items are changed. | (sourceSelectedKeys, targetSelectedKeys): void | |
2018-04-06 16:20:45 +00:00
## Warning
2018-04-07 02:32:13 +00:00
According the standard of Vue, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier.
2018-04-06 16:20:45 +00:00
If there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element.
```jsx
// eg. your primary key is `uid`
2018-04-07 02:32:13 +00:00
return <Transfer :rowKey="record => record.uid" />;
2018-04-06 16:20:45 +00:00
```