Transfer

Transfer the elements between two columns in an intuitive and efficient way.

One or more elements can be selected from either column, one click on the proper ‘direction’ button, and the transfer is done. The left column is considered the ‘source’ and the right column is considered the ‘target’. As you can see in the API description, these names are reflected in.

Examples

2/14 itemsSource

Not Found

6 itemsTarget

Not Found

Basic

The most basic usage of Transfer involves providing the source data and target keys arrays, plus the rendering and some callback functions.

<template>
  <a-transfer
    :dataSource="mockData"
    :titles="['Source', 'Target']"
    :targetKeys="targetKeys"
    :selectedKeys="selectedKeys"
    @change="handleChange"
    @selectChange="handleSelectChange"
    @scroll="handleScroll"
    :render="item=>item.title"
  >
  </a-transfer>
</template>
<script>
export default {
  data () {
    const mockData = [];
    for (let i = 0; i < 20; i++) {
      mockData.push({
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        disabled: i % 3 < 1,
      });
    }

    const targetKeys = mockData
            .filter(item => +item.key % 3 > 1)
            .map(item => item.key);
    return {
      mockData,
      targetKeys,
      selectedKeys: ['1', '4'],
    }
  },
  methods: {
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys

      console.log('targetKeys: ', this.targetKeys);
      console.log('direction: ', direction);
      console.log('moveKeys: ', moveKeys);
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]

      console.log('sourceSelectedKeys: ', sourceSelectedKeys);
      console.log('targetSelectedKeys: ', targetSelectedKeys);
    },
    handleScroll(direction, e) {
      console.log('direction:', direction);
      console.log('target:', e.target);
    },
  },
}
</script>

10 items

Not Found

10 items

Not Found

Search

Transfer with a search box.

<template>
  <a-transfer
    :dataSource="mockData"
    showSearch
    :filterOption="filterOption"
    :targetKeys="targetKeys"
    @change="handleChange"
    :render="item=>item.title"
  >
  </a-transfer>
</template>
<script>
export default {
  data () {
    return {
      mockData: [],
      targetKeys: [],
    }
  },
  mounted() {
    this.getMock()
  },
  methods: {
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.mockData = mockData
      this.targetKeys = targetKeys
    },
    filterOption(inputValue, option) {
      return option.description.indexOf(inputValue) > -1;
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys
    },
  },
}
</script>

Advanced

You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.

<template>
  <a-transfer
    :dataSource="mockData"
    showSearch
    :listStyle="{
      width: '250px',
      height: '300px',
    }"
    :operations="['to right', 'to left']"
    :targetKeys="targetKeys"
    @change="handleChange"
    :render="item=>`${item.title}-${item.description}`"
  >
    <a-button
      size="small"
      style="float:right;margin: 5px"
      @click="getMock"
      slot="footer"
      slot-scope="props"
    >
      reload
    </a-button>
    <span
      slot="notFoundContent"
    >
      没数据
    </span>
  </a-transfer>
</template>
<script>
export default {
  data () {
    return {
      mockData: [],
      targetKeys: [],
    }
  },
  mounted() {
    this.getMock()
  },
  methods: {
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.mockData = mockData
      this.targetKeys = targetKeys
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys
    },
  },
}
</script>

8 items

Not Found

12 items

Not Found

Custom datasource

Custom each Transfer Item, and in this way you can render a complex datasource.

<template>
  <a-transfer
    :dataSource="mockData"
    :listStyle="{
      width: '300px',
      height: '300px',
    }"
    :targetKeys="targetKeys"
    @change="handleChange"
    :render="renderItem"
  >
  </a-transfer>
</template>
<script>
export default {
  data () {
    return {
      mockData: [],
      targetKeys: [],
    }
  },
  mounted() {
    this.getMock()
  },
  methods: {
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.mockData = mockData
      this.targetKeys = targetKeys
    },
    renderItem(item) {
      const customLabel = (
        <span class="custom-item">
          {item.title} - {item.description}
        </span>
      );

      return {
        label: customLabel, // for displayed item
        value: item.title, // for title and filter matching
      };
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys
    },
  },
}
</script>

999 items

Not Found

1001 items

Not Found

Performance Test

2000 items.

<template>
  <a-transfer
    :dataSource="mockData"
    :targetKeys="targetKeys"
    @change="handleChange"
    :render="item=>item.title"
  >
  </a-transfer>
</template>
<script>
export default {
  data () {
    return {
      mockData: [],
      targetKeys: [],
    }
  },
  mounted() {
    this.getMock()
  },
  methods: {
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 2000; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.mockData = mockData
      this.targetKeys = targetKeys
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys
    },
  },
}
</script>

API

Property	Description	Type	Default
dataSource	Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop.	[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}]	[]
filterOption	A function to determine whether an item should show in search result list	(inputValue, option): boolean
footer	customize the progress dot by setting a scoped slot	slot="footer" slot-scope="props"
lazy	property of vc-lazy-load for lazy rendering items. Turn off it by set to `false`.	object\|boolean	`{ height: 32, offset: 32 }`
listStyle	A custom CSS style used for rendering the transfer columns.	object
notFoundContent	Text to display when a column is empty.	string\|slot	'The list is empty'
operations	A set of operations that are sorted from bottom to top.	string[]	['>', '<']
render	The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title	Function(record)
searchPlaceholder	The hint text of the search box.	string	'Search here'
selectedKeys	A set of keys of selected items.	string[]	[]
showSearch	If included, a search box is shown on each column.	boolean	false
targetKeys	A set of keys of elements that are listed on the right column.	string[]	[]
titles	A set of titles that are sorted from left to right.	string[]	-

events

Events Name	Description	Arguments
change	A callback function that is executed when the transfer between columns is complete.	(targetKeys, direction, moveKeys): void
scroll	A callback function which is executed when scroll options list	(direction, event): void
searchChange	A callback function which is executed when search field are changed	(direction: 'left'\|'right', event: Event): void
selectChange	A callback function which is executed when selected items are changed.	(sourceSelectedKeys, targetSelectedKeys): void

Warning

According the standard of Vue, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in dataSource array. By default, key property is used as an unique identifier.

If there's no key in your data, you should use rowKey to specify the key that will be used for uniquely identify each element.

// eg. your primary key is `uid`
return <Transfer :rowKey="record => record.uid" />;

Transfer

Examples

Basic #

Search #

Advanced #

Custom datasource #

Performance Test #

API #

events #

Warning #

Basic

Search

Advanced

Custom datasource

Performance Test

API

events

Warning