Transfer 穿梭框

示例

尺寸

可选的尺寸 ui 属性值:s / m

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

Selected: []

在 GitHub 上编辑此页编辑
<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>

无搜索

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

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>

自定义搜索

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

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>

扁平输出树形数据

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

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 来指定选中值的合并模式。

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

Selected: []

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-radio-group
      v-model="mergeChecked"
      :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>
.veui-radio-group {
  margin-bottom: 20px;
}
</style>

API

属性

名称类型默认值描述
uistring=-

预设样式。

描述
s小尺寸样式。
m中尺寸样式。
datasourceArray<Object>[]

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

名称类型描述
labelstring项目的文字描述。
valuestring项目对应的值。
disabledboolean=项目是否被禁用。
childrenArray<Object>=项目的子项目数组,数组项类型同 datasource 数组项。
searchableboolean=true是否允许搜索。
filterfunction=见描述

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

名称类型描述
fromstring搜索来源,可选枚举值:'candidate''selected''candidate' 表示是待选列表触发的搜索,'selected' 表示是已选列表触发的搜索。
keywordstring搜索关键词。
itemObject当前遍历到的数据项。
indexnumber当前数据项在兄弟项目中的索引。
datasourceArray<Object>datasource 属性一致。
import { includes } from 'lodash'

function (keyword, { label }) {
  return includes(label, keyword)
}
selectedArray=[]

v-model

当前选中的值,是 datasource 中选中项的 value 集合(受 keys 属性影响)。

candidate-placeholderstring=-待选区内搜索框的占位文本。
selected-placeholderstring=-已选区内搜索框的占位文本。
candidate-labelstring=-“待选项”标题的文字内容。
selected-labelstring=-“已选项”标题的文字内容。
selected-show-modestring='tree'

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

描述
tree以树形结构展示。
flat以扁平方式展示,数据展开成一维数组。
keysstring | function'value'

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

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

merge-checkedstring=keep-all

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

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

插槽

名称描述
candidate整个待选区。
candidate-head

待选区内顶部标题区域。

名称类型描述
countnumber待选项的数量。
selected-head

已选区内顶部标题区域。

名称类型描述
countnumber已选项的数量。
candidate-title待选区内顶部标题文本区域。作用域参数与 candidate-head 一致。
selected-title已选区内顶部标题文本区域。作用域参数与 selected-head 一致。
candidate-no-data数据源没数据时显示的内容。
selected-no-data没有已选项时显示的内容。
candidate-item

待选区内的每一项内容。

名称类型描述
labelstring项目的文本描述。
valuestring项目的值。
disabledboolean=项目是否被禁用。
childrenArray<Object>=项目的子项目数组,数组项类型同 datasource 数组项。
indexnumber当前项目在同层级兄弟项中的索引。
depthnumber当前项目在树结构中的深度。
selected-item

已选区内的每一项内容。

如果 Transfer 组件的 selected-show-mode'tree',则作用域参数与 candidate-item 一致;如果 selected-show-mode'flat',则作用域参数为:

名称类型描述
itemsArray<Object>包含从树形结构的根项目到叶子项目的路径。数组项类型与 datasource 项目相同。
indexnumber当前项目在展开数组中的索引。
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展开状态,点击后收起。
separatorselected-show-mode'flat' 时层级间的分隔符。
在 GitHub 上编辑此页编辑