Transfer 穿梭框

示例

基本功能

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

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>

无搜索

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

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>

自定义搜索

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

Selected: []

自定义 filter 以根据 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>

扁平输出树形数据

待选项

  • Infused
  • Boiled
  • Espresso
  • Milk coffee

已选项

请选择

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

属性

名称类型默认值描述
datasourceArray<Object>[]

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

名称类型描述
labelstring项目的文字描述。
valuestring项目对应的值。
childrenArray<Object>=项目的子项目数组，数组项类型同 datasource 数组项。
searchablebooleantrue是否允许搜索。
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-已选区内搜索框的占位文本。
selected-show-modestring'tree'

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

值描述
tree以树形结构展示。
flat以扁平方式展示，数据展开成一维数组。
keysstring|function'value'自定义获取 datasource 中每一项的 value 值（具备唯一性）。可以用字符串的形式直接指定 datasource 中的哪个属性作为 value，也可以传递一个函数更加灵活地去生成 value 值。

插槽

名称描述
candidate-head待选区内顶部标题区域。
selected-head已选区内顶部标题区域。
candidate-title待选区内顶部标题文本区域。
selected-title已选区内顶部标题文本区域。
candidate-no-data数据源没数据时显示的内容。
selected-no-data没有已选项时显示的内容。
candidate-item

待选区内的每一项内容。

名称类型描述
labelstring项目的文本描述。
valuestring项目的值。
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 一致。

图标

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