## 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 ``` ::: ### 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 ``` ::: ### 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 ``` ::: ### 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 ``` ::: ### 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 |