Transfer

Demos

Basic usage

Selected: []

<template>
<article>
  <veui-transfer
    v-model="selected"
    :datasource="coffees"
  />
  <p>Selected: {{ selected }}</p>
</article>
</template>

<script>
import { Transfer } from 'veui'

export default {
  components: {
    'veui-transfer': Transfer
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          children: [
            {
              label: 'Percolated',
              value: 'percolated'
            },
            {
              label: 'Turkish',
              value: 'turkish'
            },
            {
              label: 'Moka',
              value: 'moka'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro'
            },
            {
              label: 'Doppio',
              value: 'doppio'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ],
      selected: []
    }
  }
}
</script>

Without search input

Selected: []

<template>
<article>
  <veui-transfer
    v-model="selected"
    :datasource="coffees"
    :searchable="false"
  />
  <p>Selected: {{ selected }}</p>
</article>
</template>

<script>
import { Transfer } from 'veui'

export default {
  components: {
    'veui-transfer': Transfer
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          children: [
            {
              label: 'Percolated',
              value: 'percolated'
            },
            {
              label: 'Turkish',
              value: 'turkish'
            },
            {
              label: 'Moka',
              value: 'moka'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro'
            },
            {
              label: 'Doppio',
              value: 'doppio'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ],
      selected: []
    }
  }
}
</script>

Custom search

Selected: []

Customize filter to filter by any of label/value/id.

<template>
<article>
  <veui-transfer
    v-model="selected"
    :datasource="coffees"
    :filter="filter"
  />
  <p>Selected: {{ selected }}</p>
</article>
</template>

<script>
import { Transfer } from 'veui'
import { includes } from 'lodash'

export default {
  components: {
    'veui-transfer': Transfer
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          id: '100',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              id: '100-01',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed',
                  id: '100-01-01'
                },
                {
                  label: 'Filtered',
                  value: 'filtered',
                  id: '100-01-02'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over',
                  id: '100-01-03'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed',
                  id: '100-01-04'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press',
              id: '100-02'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew',
              id: '100-03'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          id: '200',
          children: [
            {
              label: 'Percolated',
              value: 'percolated',
              id: '200-01'
            },
            {
              label: 'Turkish',
              value: 'turkish',
              id: '200-02'
            },
            {
              label: 'Moka',
              value: 'moka',
              id: '200-03'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          id: '300',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano',
              id: '300-01'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo',
              id: '300-02'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano',
              id: '300-03'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema',
              id: '300-04'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro',
              id: '300-05'
            },
            {
              label: 'Doppio',
              value: 'doppio',
              id: '300-06'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano',
              id: '300-07'
            },
            {
              label: 'Guillermo',
              value: 'guillermo',
              id: '300-08'
            },
            {
              label: 'Ristretto',
              value: 'ristretto',
              id: '300-09'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          id: '400',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white',
              id: '400-01'
            },
            {
              label: 'Latte',
              value: 'latte',
              id: '400-02'
            },
            {
              label: 'Macchiato',
              value: 'macchiato',
              id: '400-03'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino',
              id: '400-04'
            },
            {
              label: 'White coffee',
              value: 'white-coffee',
              id: '400-05'
            }
          ]
        }
      ],
      selected: []
    }
  },
  methods: {
    filter (type, keyword, { label, value, id }) {
      let key = keyword.toLowerCase()
      return (
        includes(label.toLowerCase(), key) ||
        includes(value.toLowerCase(), key) ||
        includes(id, key)
      )
    }
  }
}
</script>

Selected values as list

Selected: []

<template>
<article>
  <veui-transfer
    v-model="selected"
    :datasource="coffees"
    selected-show-mode="flat"
  />
  <p>Selected: {{ selected }}</p>
</article>
</template>

<script>
import { Transfer } from 'veui'

export default {
  components: {
    'veui-transfer': Transfer
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          id: '100',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              id: '100-01',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed',
                  id: '100-01-01'
                },
                {
                  label: 'Filtered',
                  value: 'filtered',
                  id: '100-01-02'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over',
                  id: '100-01-03'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed',
                  id: '100-01-04'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press',
              id: '100-02'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew',
              id: '100-03'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          id: '200',
          children: [
            {
              label: 'Percolated',
              value: 'percolated',
              id: '200-01'
            },
            {
              label: 'Turkish',
              value: 'turkish',
              id: '200-02'
            },
            {
              label: 'Moka',
              value: 'moka',
              id: '200-03'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          id: '300',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano',
              id: '300-01'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo',
              id: '300-02'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano',
              id: '300-03'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema',
              id: '300-04'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro',
              id: '300-05'
            },
            {
              label: 'Doppio',
              value: 'doppio',
              id: '300-06'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano',
              id: '300-07'
            },
            {
              label: 'Guillermo',
              value: 'guillermo',
              id: '300-08'
            },
            {
              label: 'Ristretto',
              value: 'ristretto',
              id: '300-09'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          id: '400',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white',
              id: '400-01'
            },
            {
              label: 'Latte',
              value: 'latte',
              id: '400-02'
            },
            {
              label: 'Macchiato',
              value: 'macchiato',
              id: '400-03'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino',
              id: '400-04'
            },
            {
              label: 'White coffee',
              value: 'white-coffee',
              id: '400-05'
            }
          ]
        }
      ],
      selected: []
    }
  }
}
</script>

API

Props

Name Type Default Description

datasource

Array<Object>

[]

The datasource of the transfer. The type of node item is {label, value, children, ...}.

Name	Type	Description
`label`	`string`	The descriptive label of each item.
`value`	`string`	The value of each item.
`children`	`Array<Object>=`	The child items of each item. The item type is the same as `datasource` items.

searchable boolean true Whether to allow search.

filter

function

See description

The filter function. The function signature is function(from, keyword, item, index, datasource): boolean. Items that make filter function returns false will be hidden.

Name	Type	Description
`from`	`string`	The source of search. Available values are `'candidate'`/`'selected'`. `'candidate'` means search is triggered from the candidate panel, `'selected'` means from the selected panel.
`keyword`	`string`	The search keyword.
`item`	`Object`	Each item in `datasource`.
`index`	`number`	The index of each item among its siblings.
`datasource`	`Array<{label: string, ...}>`	Same as the `datasource` prop.

import { includes } from 'lodash'

function (keyword, { label }) {
  return includes(label, keyword)
}

selected

Array

[]

v-model

The selected values which is the value array of datasource items (affected by the keys prop).

candidate-placeholder string - The placeholder text in the search input of the candidate panel.

selected-placeholder string - The placeholder text in the search input of the selected panel.

selected-show-mode

string

'tree'

To specify how should items inside selected panel be displayed.

Value	Description
`tree`	Displayed as a tree structure.
`flat`	Displayed as a flattened array.

keys string|function 'value' The customized unique key for datasource items. String values can be used to specify which field value is used. Also a function can bu used to specify a customized key value.

Slots

Name Description

candidate-head The head area of the candidate panel.

selected-head The head area of the selected panel.

candidate-title The title text of the candidate panel.

selected-title The title text of the selected panel.

candidate-no-data The content displayed when there's no data inside the candidate panel.

selected-no-data The content displayed when there's no data inside the selected panel.

candidate-item

The content of each item inside the candidate panel.

Name	Type	Description
`label`	`string`	The descriptive label of current item.
`value`	`string`	The value of current item.
`children`	`Array<Object>=`	The array of the child items of each item. Shares the same type with `datasource` items.
`index`	`number`	The index of current item among its siblings.
`depth`	`number`	The depth of current item in the tree structure.

selected-item

The content of each item inside the selected panel.

The scope properties will be the same as slot candidate-item when selected-show-mode is 'tree'. They'll be as follows when selected-show-mode is 'flat'.

Name	Type	Description
`items`	`Array<Object>`	All ancestor items from the top level down to current item. Shares the same item type with `datasource` items.
`index`	`number`	The index of current item among its siblings.

candidate-item-label Label text of each item inside the candidate panel. Shares the same scope properties with slot candidate-item.

selected-item-label Label text of each item inside the selected panel. Shares the same scope properties with slot selected-item when selected-show-mode is 'tree'. Otherwise this slot specifies custom content for any item along the path for all selected leaf item and shares the same scope properties with slot candidate-item.

Icons

Name	Description
`checked`	The checked state.
`select`	Select items.
`remove`	Remove items.
`expand`	Click to expand (currently being collapsed).
`collapse`	Click to collapse (currently being expanded).
`separator`	The separator between level labels when `selected-show-mode` is `'flat'`.

Transfer

Demos

Basic usage

Available

Selected

Without search input

待选项

已选项

Custom search

待选项

已选项

Selected values as list

待选项

已选项

API

Props

Slots

Icons

Transfer

Demos

Basic usage

Available Select all

Selected Deselect all

Without search input

待选项 选择全部

已选项 移除全部

Custom search

待选项 选择全部

已选项 移除全部

Selected values as list

待选项 选择全部

已选项 移除全部

API

Props

Slots

Icons

Available

Selected

待选项

已选项

待选项

已选项

待选项

已选项