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