@sixi/transfer v1.0.4

transfer 级联穿梭框

通过穿梭框级联选择多个值，返回最终的值。相比于普通穿梭框，它拥有级联功能，相比于级联下拉，它支持多选且结果更直观。

何时使用

数据具有层级关系，同层的每个数据具有唯一值。

代码演示

下面是一个典型的省市区的示例：

<template>
  <transfer v-model="selectedData" :options="area" :boxTitle="['省份', '城市', '地区']" selectedTitle="已选省市区" :level="3" />
</template>
<script>
export default {
  data () {
    return {
      area: [{ 'label': '福建省', 'value': '227', 'children': [{ 'label': '厦门市', 'value': '228', 'children': [{ 'label': '思明区', 'value': '229' }, { 'label': '湖里区', 'value': '230' }, { 'label': '集美区', 'value': '231' }, { 'label': '海沧区', 'value': '232' }, { 'label': '翔安区', 'value': '233' }, { 'label': '同安区', 'value': '234' }] }] }],
      selectedData: ['227,228,230']
    }
  }
}
</script>

可以看出，选项options是一个嵌套的数组，具有label，value和children三个属性, 已选值可以使用v-model进行双向绑定，绑定的值是一个字符串数组，每个元素是用逗号分割的值，每个元素的逗号分割的值的数量应和指定的level相同，否则返回结果将会异常。

API

事件