<template> <Transfer :data="data3" :target-keys="targetKeys3" :list-style="listStyle" :render-format="render3" :operations="['To left','To right']" filterable @on-change="handleChange3"> <div :style="{float: 'right', margin: '5px'}"> <Button type="ghost" size="small" @click="reloadMockData">Refresh</Button> </div> </Transfer> </template> <script> export default { data () { return { data3: this.getMockData(), targetKeys3: this.getTargetKeys(), listStyle: { width: '250px', height: '300px' } } }, methods: { getMockData () { let mockData = []; for (let i = 1; i <= 20; i++) { mockData.push({ key: i.toString(), label: 'Content ' + i, description: 'The desc of content ' + i, disabled: Math.random() * 3 < 1 }); } return mockData; }, getTargetKeys () { return this.getMockData() .filter(() => Math.random() * 2 > 1) .map(item => item.key); }, handleChange3 (newTargetKeys) { this.targetKeys3 = newTargetKeys; }, render3 (item) { return item.label + ' - ' + item.description; }, reloadMockData () { this.data3 = this.getMockData(); this.targetKeys3 = this.getTargetKeys(); } } } </script>