@sixi/transfer

级联穿梭框

Usage no npm install needed!

<script type="module">
  import sixiTransfer from 'https://cdn.skypack.dev/@sixi/transfer';
</script>

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)