• Transfer 穿梭框
    • 概述
    • 说明
    • 代码示例
    • API
      • Transfer props
      • Transfer events
      • Transfer slot

    Transfer 穿梭框

    概述

    双栏穿梭选择框，常用于将多个项目从一边移动到另一边。

    说明

    Transfer 组件主要基于以下四个 API 来使用：

    • :data：总体数据，数组，每项为一个对象，且必须含有 key 值，组件基于此做索引。
    • :target-keys：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。
    • :render-format：每行数据显示的格式函数，默认优先显示 label 值，没有时显示 key 值，可以自己组合出需要的数据格式。
    • @on-change：当点击转移按钮时，组件本身并不会转移数据，而是触发事件，由用户来操作数据。示例：
    1. export default {
    2.     data () {
    3.         return {
    4.             data: [
    5.                 { "key": "1", "label": "Content 1", "disabled": false },
    6.                 { "key": "2", "label": "Content 2", "disabled": true },
    7.                 { "key": "3", "label": "Content 3", "disabled": false }
    8.             ],
    9.             targetKeys: ["1","2"]
    10.         }
    11.     },
    12.     methods: {
    13.         render (item) {
    14.             return item.key + ':' + item.label;
    15.         },
    16.         onChange (newTargetKeys) {
    17.             this.targetKeys = newTargetKeys;
    18.         }
    19.     }
    20. }

    代码示例

    Transfer 穿梭框 - 图1

    基础用法

    基本用法，展示了 data、target-keys、每行的渲染函数 render-format 以及回调函数 on-change 的用法。

    1. <template>
    2.     <Transfer
    3.         :data="data1"
    4.         :target-keys="targetKeys1"
    5.         :render-format="render1"
    6.         @on-change="handleChange1"></Transfer>
    7. </template>
    8. <script>
    9.     export default {
    10.         data () {
    11.             return {
    12.                 data1: this.getMockData(),
    13.                 targetKeys1: this.getTargetKeys()
    14.             }
    15.         },
    16.         methods: {
    17.             getMockData () {
    18.                 let mockData = [];
    19.                 for (let i = 1; i <= 20; i++) {
    20.                     mockData.push({
    21.                         key: i.toString(),
    22.                         label: 'Content ' + i,
    23.                         description: 'The desc of content  ' + i,
    24.                         disabled: Math.random() * 3 < 1
    25.                     });
    26.                 }
    27.                 return mockData;
    28.             },
    29.             getTargetKeys () {
    30.                 return this.getMockData()
    31.                         .filter(() => Math.random() * 2 > 1)
    32.                         .map(item => item.key);
    33.             },
    34.             render1 (item) {
    35.                 return item.label;
    36.             },
    37.             handleChange1 (newTargetKeys, direction, moveKeys) {
    38.                 console.log(newTargetKeys);
    39.                 console.log(direction);
    40.                 console.log(moveKeys);
    41.                 this.targetKeys1 = newTargetKeys;
    42.             }
    43.         }
    44.     }
    45. </script>

    Transfer 穿梭框 - 图2

    搜索

    通过设置属性 filterable 可以进行搜索，可以自定义搜索函数。

    1. <template>
    2.     <Transfer
    3.         :data="data2"
    4.         :target-keys="targetKeys2"
    5.         filterable
    6.         :filter-method="filterMethod"
    7.         @on-change="handleChange2"></Transfer>
    8. </template>
    9. <script>
    10.     export default {
    11.         data () {
    12.             return {
    13.                 data2: this.getMockData(),
    14.                 targetKeys2: this.getTargetKeys()
    15.             }
    16.         },
    17.         methods: {
    18.             getMockData () {
    19.                 let mockData = [];
    20.                 for (let i = 1; i <= 20; i++) {
    21.                     mockData.push({
    22.                         key: i.toString(),
    23.                         label: 'Content ' + i,
    24.                         description: 'The desc of content  ' + i,
    25.                         disabled: Math.random() * 3 < 1
    26.                     });
    27.                 }
    28.                 return mockData;
    29.             },
    30.             getTargetKeys () {
    31.                 return this.getMockData()
    32.                         .filter(() => Math.random() * 2 > 1)
    33.                         .map(item => item.key);
    34.             },
    35.             handleChange2 (newTargetKeys) {
    36.                 this.targetKeys2 = newTargetKeys;
    37.             },
    38.             filterMethod (data, query) {
    39.                 return data.label.indexOf(query) > -1;
    40.             }
    41.         }
    42.     }
    43. </script>

    Transfer 穿梭框 - 图3

    高级用法

    穿梭框高级用法，可以自定义两列的宽高、操作文案，以及底部自定义操作，更多配置见 API。

    1. <template>
    2.     <Transfer
    3.         :data="data3"
    4.         :target-keys="targetKeys3"
    5.         :list-style="listStyle"
    6.         :render-format="render3"
    7.         :operations="['To left','To right']"
    8.         filterable
    9.         @on-change="handleChange3">
    10.         <div :style="{float: 'right', margin: '5px'}">
    11.             <Button size="small" @click="reloadMockData">Refresh</Button>
    12.         </div>
    13.     </Transfer>
    14. </template>
    15. <script>
    16.     export default {
    17.         data () {
    18.             return {
    19.                 data3: this.getMockData(),
    20.                 targetKeys3: this.getTargetKeys(),
    21.                 listStyle: {
    22.                     width: '250px',
    23.                     height: '300px'
    24.                 }
    25.             }
    26.         },
    27.         methods: {
    28.             getMockData () {
    29.                 let mockData = [];
    30.                 for (let i = 1; i <= 20; i++) {
    31.                     mockData.push({
    32.                         key: i.toString(),
    33.                         label: 'Content ' + i,
    34.                         description: 'The desc of content  ' + i,
    35.                         disabled: Math.random() * 3 < 1
    36.                     });
    37.                 }
    38.                 return mockData;
    39.             },
    40.             getTargetKeys () {
    41.                 return this.getMockData()
    42.                         .filter(() => Math.random() * 2 > 1)
    43.                         .map(item => item.key);
    44.             },
    45.             handleChange3 (newTargetKeys) {
    46.                 this.targetKeys3 = newTargetKeys;
    47.             },
    48.             render3 (item) {
    49.                 return item.label + ' - ' + item.description;
    50.             },
    51.             reloadMockData () {
    52.                 this.data3 = this.getMockData();
    53.                 this.targetKeys3 = this.getTargetKeys();
    54.             }
    55.         }
    56.     }
    57. </script>

    Transfer 穿梭框 - 图4

    自定义渲染行数据

    可以通过 render-format 来渲染复杂的数据。

    1. <template>
    2.     <Transfer
    3.         :data="data4"
    4.         :target-keys="targetKeys4"
    5.         :render-format="render4"
    6.         @on-change="handleChange4"></Transfer>
    7. </template>
    8. <script>
    9.     export default {
    10.         data () {
    11.             return {
    12.                 data4: this.getMockData(),
    13.                 targetKeys4: this.getTargetKeys()
    14.             }
    15.         },
    16.         methods: {
    17.             getMockData () {
    18.                 let mockData = [];
    19.                 for (let i = 1; i <= 20; i++) {
    20.                     mockData.push({
    21.                         key: i.toString(),
    22.                         label: 'Content ' + i,
    23.                         description: 'The desc of content  ' + i,
    24.                         disabled: Math.random() * 3 < 1
    25.                     });
    26.                 }
    27.                 return mockData;
    28.             },
    29.             getTargetKeys () {
    30.                 return this.getMockData()
    31.                         .filter(() => Math.random() * 2 > 1)
    32.                         .map(item => item.key);
    33.             },
    34.             handleChange4 (newTargetKeys) {
    35.                 this.targetKeys4 = newTargetKeys;
    36.             },
    37.             render4 (item) {
    38.                 return item.label + ' - ' + item.description;
    39.             }
    40.         }
    41.     }
    42. </script>

    API

    Transfer props

    属性说明类型默认值
    data数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外。Array[]
    targetKeys显示在右侧框数据的key集合Array[]
    render-format每行数据渲染函数，该函数的入参为 data 中的项Function默认显示label，没有时显示key
    selected-keys设置哪些项应该被选中Array[]
    list-style两个穿梭框的自定义样式Object{}
    titles标题集合，顺序从左至右Array['源列表', '目的列表']
    operations操作文案集合，顺序从上至下Array[]
    filterable是否显示搜索框Booleanfalse
    filter-placeholder搜索框的占位String请输入搜索内容
    filter-method自定义搜索函数，入参为 data 和 query，data 为项，query 为当前输入的搜索词Function默认搜索label
    not-found-text当列表为空时显示的内容String列表为空

    Transfer events

    事件名说明返回值
    on-change选项在两栏之间转移时的回调函数targetKeys, direction, moveKeys
    on-selected-change选中项发生变化时触发sourceSelectedKeys, targetSelectedKeys

    Transfer slot

    名称说明
    无自定义底部内容