Transfer 穿梭框

示例

尺寸

可供选用的尺寸 ui 属性值：s / m。

<template>
<article>
  <section>
    <veui-transfer
      v-model="selected"
      :datasource="coffees"
    />
  </section>
  <section>
    <veui-transfer
      v-model="selected"
      :datasource="coffees"
      ui="s"
    />
  </section>
  <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>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

无搜索

Selected: []

在 GitHub 上编辑此示例编辑

<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>

自定义搜索

Selected: []

自定义 filter 以根据 label / value / id 筛选。

在 GitHub 上编辑此示例编辑

<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: []

在 GitHub 上编辑此示例编辑

<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>

选中值的合并模式

设置 merge-checked 来指定选中值的合并模式。

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-radio-group
      v-model="mergeChecked"
      class="group"
      :items="items"
    />
    <veui-transfer
      v-model="selected"
      :datasource="coffees"
      :merge-checked="mergeChecked"
    />
    <p>Selected: {{ selected }}</p>
  </section>
</article>
</template>

<script>
import { Transfer, RadioGroup } from 'veui'

export default {
  components: {
    'veui-transfer': Transfer,
    'veui-radio-group': RadioGroup
  },
  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'
            }
          ]
        }
      ],
      mergeChecked: 'keep-all',
      selected: []
    }
  },
  computed: {
    items () {
      return [
        { label: 'keep-all', value: 'keep-all' },
        { label: 'downwards', value: 'downwards' },
        { label: 'upwards', value: 'upwards' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.group {
  margin-bottom: 20px;
}
</style>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`s`	小尺寸样式。
`m`	中尺寸样式。

datasource

Array<Object>

[]

数据源数组，每个项目类型为 {label, value, disabled, children, ...}。

名称	类型	描述
`label`	`string`	项目的文字描述。
`value`	`string`	项目对应的值。
`disabled`	`boolean`	项目是否被禁用。
`children`	`Array<Object>`	项目的子项目数组，数组项类型同 `datasource` 数组项。

searchable boolean true 是否允许搜索。

filter

function

见描述

搜索过滤函数，签名为 function(from, keyword, item, index, datasource): boolean。返回值为 false 的项目将被从结果中过滤掉。

名称	类型	描述
`from`	`string`	搜索来源，可选枚举值：`'candidate'`、`'selected'`。`'candidate'` 表示是待选列表触发的搜索，`'selected'` 表示是已选列表触发的搜索。
`keyword`	`string`	搜索关键词。
`item`	`Object`	当前遍历到的数据项。
`index`	`number`	当前数据项在兄弟项目中的索引。
`datasource`	`Array<Object>`	与 `datasource` 属性一致。

import { includes } from 'lodash'

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

selected

Array

[]

v-model

当前选中的值，是 datasource 中选中项的 value 集合（受 keys 属性影响）。

candidate-placeholder string - 待选区内搜索框的占位文本。

selected-placeholder string - 已选区内搜索框的占位文本。

candidate-title string - “待选项”标题的文字内容。

selected-title string - “已选项”标题的文字内容。

selected-show-mode

string

'tree'

选中框中选中项的显示方式。

值	描述
`tree`	以树形结构展示。
`flat`	以扁平方式展示，数据展开成一维数组。

keys

string | function

'value'

自定义获取 datasource 中每一项的 value 值（具备唯一性）。可以用字符串的形式直接指定 datasource 中的哪个属性作为 value，也可以传递一个函数更加灵活地去生成 value 值。

若类型为 function，参数为 (item: Object)，item 是 datasource 中的一个节点的属性，返回值是添加到 selected 中的值。

merge-checked

string

keep-all

选中值的合并策略。当某个节点下的所有子节点都被选中时，可以选择只保留父节点、只保留子节点或都保留。

值	描述
`keep-all`	父子节点都会在选中值中。
`upwards`	尽可能往祖先方向合并选中值。
`downwards`	尽可能往后代方向合并选中值。

插槽

名称描述

candidate 整个待选区。

candidate-head

待选区内顶部标题区域。

名称	类型	描述
`count`	`number`	待选项的数量。

selected-head

已选区内顶部标题区域。

名称	类型	描述
`count`	`number`	已选项的数量。

candidate-title 待选区内顶部标题文本区域。插槽参数与 candidate-head 一致。

selected-title 已选区内顶部标题文本区域。插槽参数与 selected-head 一致。

candidate-no-data 数据源没数据时显示的内容。

selected-no-data 没有已选项时显示的内容。

candidate-item

待选区内的每一项内容。

名称	类型	描述
`label`	`string`	项目的文本描述。
`value`	`string`	项目的值。
`disabled`	`boolean`	项目是否被禁用。
`children`	`Array<Object>`	项目的子项目数组，数组项类型同 `datasource` 数组项。
`index`	`number`	当前项目在同层级兄弟项中的索引。
`depth`	`number`	当前项目在树结构中的深度。

selected-item

已选区内的每一项内容。

如果 Transfer 组件的 selected-show-mode 为 'tree'，则插槽参数与 candidate-item 一致；如果 selected-show-mode 为 'flat'，则插槽参数为：

名称	类型	描述
`items`	`Array<Object>`	包含从树形结构的根项目到叶子项目的路径。数组项类型与 `datasource` 项目相同。
`index`	`number`	当前项目在展开数组中的索引。

candidate-item-label 待选区内每一项的文本区域。插槽参数与 candidate-item 一致。

selected-item-label 已选区内每一项的文本区域。当 selected-show-mode 为 'tree' 时插槽参数与 selected-item 一致。否则该插槽对应每个已选叶子项目的整条路径上的每个节点内容，此时插槽参数与 candidate-item 一致。

事件

名称	描述
`select`	切换选择时触发。回调参数为 `(selected: Array<string>)`。`selected` 为已选项 `value` 字段集合。

图标

名称	描述
`checked`	已选状态。
`select`	待选择。
`remove`	移除。
`expand`	收起状态，点击后展开。
`collapse`	展开状态，点击后收起。
`separator`	当 `selected-show-mode` 为 `'flat'` 时层级间的分隔符。

在 GitHub 上编辑此页面编辑

Transfer 穿梭框

示例

尺寸

待选项全选

已选项清空

待选项全选

已选项清空

无搜索

待选项全选

已选项清空

自定义搜索

待选项全选

已选项清空

扁平输出树形数据

待选项全选

已选项清空

选中值的合并模式

待选项全选

已选项清空

API

属性

插槽

事件

图标

待选项

已选项

待选项

已选项

待选项

已选项

待选项

已选项

待选项

已选项

待选项

已选项