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

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | options | 级联选项值 | Object[] | [] | | value(v-model) | 初始化已选的值 | String[] | [] | | titles | 级联穿梭的标题 | String[] | ['1级', '2级', '3级',...] | | selectedTitle | 已选结果的标题 | String | 已选 | | level | 级联穿梭的级数 | Number | 1 |

事件

| 事件名称 | 说明 | 回调参数 | | :--- | :--- | :--- | | change | 操作变更后返回的值 | function(selected, selectedList) |