Commit 84a8a413aa0f14873b4923c703242625441e94dd
1 parent
7c2ed52c
fixed bug of Transfer when no slot
fixed bug of Transfer when no slot
Showing
3 changed files
with
79 additions
and
79 deletions
Show diff stats
examples/routers/form.vue
examples/routers/transfer.vue
| 1 | -<!--<template>--> | |
| 2 | - <!--<div>--> | |
| 3 | - <!--<Transfer--> | |
| 4 | - <!--:data="data1"--> | |
| 5 | - <!--filterable--> | |
| 6 | - <!--:target-keys="targetKeys1"--> | |
| 7 | - <!--:render-format="render1"--> | |
| 8 | - <!--@on-change="handleChange1"></Transfer>--> | |
| 9 | - <!--</div>--> | |
| 10 | -<!--</template>--> | |
| 11 | -<!--<script>--> | |
| 12 | - <!--export default {--> | |
| 13 | - <!--data () {--> | |
| 14 | - <!--return {--> | |
| 15 | - <!--data1: this.getMockData(),--> | |
| 16 | - <!--targetKeys1: this.getTargetKeys()--> | |
| 17 | - <!--}--> | |
| 18 | - <!--},--> | |
| 19 | - <!--methods: {--> | |
| 20 | - <!--getMockData () {--> | |
| 21 | - <!--let mockData = [];--> | |
| 22 | - <!--for (let i = 1; i <= 20; i++) {--> | |
| 23 | - <!--mockData.push({--> | |
| 24 | - <!--key: i.toString(),--> | |
| 25 | - <!--label: '内容' + i,--> | |
| 26 | - <!--description: '内容' + i + '的描述信息',--> | |
| 27 | - <!--disabled: Math.random() * 3 < 1--> | |
| 28 | - <!--});--> | |
| 29 | - <!--}--> | |
| 30 | - <!--return mockData;--> | |
| 31 | - <!--},--> | |
| 32 | - <!--getTargetKeys () {--> | |
| 33 | - <!--return this.getMockData()--> | |
| 34 | - <!--.filter(() => Math.random() * 2 > 1)--> | |
| 35 | - <!--.map(item => item.key);--> | |
| 36 | - <!--},--> | |
| 37 | - <!--render1 (item) {--> | |
| 38 | - <!--return item.label;--> | |
| 39 | - <!--},--> | |
| 40 | - <!--handleChange1 (newTargetKeys, direction, moveKeys) {--> | |
| 41 | - <!--console.log(newTargetKeys);--> | |
| 42 | - <!--console.log(direction);--> | |
| 43 | - <!--console.log(moveKeys);--> | |
| 44 | - <!--this.targetKeys1 = newTargetKeys;--> | |
| 45 | - <!--}--> | |
| 46 | - <!--}--> | |
| 47 | - <!--}--> | |
| 48 | -<!--</script>--> | |
| 49 | - | |
| 50 | - | |
| 51 | 1 | <template> |
| 52 | - <Transfer | |
| 53 | - :data="data3" | |
| 54 | - :target-keys="targetKeys3" | |
| 55 | - :list-style="listStyle" | |
| 56 | - :render-format="render3" | |
| 57 | - :operations="['向左移动','向右移动']" | |
| 58 | - filterable | |
| 59 | - @on-change="handleChange3"> | |
| 60 | - <div :style="{float: 'right', margin: '5px'}"> | |
| 61 | - <Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button> | |
| 62 | - </div> | |
| 63 | - </Transfer> | |
| 2 | + <div> | |
| 3 | + <Transfer | |
| 4 | + :data="data1" | |
| 5 | + filterable | |
| 6 | + :target-keys="targetKeys1" | |
| 7 | + :render-format="render1" | |
| 8 | + @on-change="handleChange1"></Transfer> | |
| 9 | + </div> | |
| 64 | 10 | </template> |
| 65 | 11 | <script> |
| 66 | 12 | export default { |
| 67 | 13 | data () { |
| 68 | 14 | return { |
| 69 | - data3: this.getMockData(), | |
| 70 | - targetKeys3: this.getTargetKeys(), | |
| 71 | - listStyle: { | |
| 72 | - width: '250px', | |
| 73 | - height: '300px' | |
| 74 | - } | |
| 15 | + data1: this.getMockData(), | |
| 16 | + targetKeys1: this.getTargetKeys() | |
| 75 | 17 | } |
| 76 | 18 | }, |
| 77 | 19 | methods: { |
| ... | ... | @@ -92,20 +34,78 @@ |
| 92 | 34 | .filter(() => Math.random() * 2 > 1) |
| 93 | 35 | .map(item => item.key); |
| 94 | 36 | }, |
| 95 | - handleChange3 (newTargetKeys) { | |
| 96 | - this.targetKeys3 = newTargetKeys; | |
| 37 | + render1 (item) { | |
| 38 | + return item.label; | |
| 97 | 39 | }, |
| 98 | - render3 (item) { | |
| 99 | - return item.label + ' - ' + item.description; | |
| 100 | - }, | |
| 101 | - reloadMockData () { | |
| 102 | - this.data3 = this.getMockData(); | |
| 103 | - this.targetKeys3 = this.getTargetKeys(); | |
| 40 | + handleChange1 (newTargetKeys, direction, moveKeys) { | |
| 41 | + console.log(newTargetKeys); | |
| 42 | + console.log(direction); | |
| 43 | + console.log(moveKeys); | |
| 44 | + this.targetKeys1 = newTargetKeys; | |
| 104 | 45 | } |
| 105 | 46 | } |
| 106 | 47 | } |
| 107 | 48 | </script> |
| 108 | 49 | |
| 50 | + | |
| 51 | +<!--<template>--> | |
| 52 | + <!--<Transfer--> | |
| 53 | + <!--:data="data3"--> | |
| 54 | + <!--:target-keys="targetKeys3"--> | |
| 55 | + <!--:list-style="listStyle"--> | |
| 56 | + <!--:render-format="render3"--> | |
| 57 | + <!--:operations="['向左移动','向右移动']"--> | |
| 58 | + <!--filterable--> | |
| 59 | + <!--@on-change="handleChange3">--> | |
| 60 | + <!--<div :style="{float: 'right', margin: '5px'}">--> | |
| 61 | + <!--<Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button>--> | |
| 62 | + <!--</div>--> | |
| 63 | + <!--</Transfer>--> | |
| 64 | +<!--</template>--> | |
| 65 | +<!--<script>--> | |
| 66 | + <!--export default {--> | |
| 67 | + <!--data () {--> | |
| 68 | + <!--return {--> | |
| 69 | + <!--data3: this.getMockData(),--> | |
| 70 | + <!--targetKeys3: this.getTargetKeys(),--> | |
| 71 | + <!--listStyle: {--> | |
| 72 | + <!--width: '250px',--> | |
| 73 | + <!--height: '300px'--> | |
| 74 | + <!--}--> | |
| 75 | + <!--}--> | |
| 76 | + <!--},--> | |
| 77 | + <!--methods: {--> | |
| 78 | + <!--getMockData () {--> | |
| 79 | + <!--let mockData = [];--> | |
| 80 | + <!--for (let i = 1; i <= 20; i++) {--> | |
| 81 | + <!--mockData.push({--> | |
| 82 | + <!--key: i.toString(),--> | |
| 83 | + <!--label: '内容' + i,--> | |
| 84 | + <!--description: '内容' + i + '的描述信息',--> | |
| 85 | + <!--disabled: Math.random() * 3 < 1--> | |
| 86 | + <!--});--> | |
| 87 | + <!--}--> | |
| 88 | + <!--return mockData;--> | |
| 89 | + <!--},--> | |
| 90 | + <!--getTargetKeys () {--> | |
| 91 | + <!--return this.getMockData()--> | |
| 92 | + <!--.filter(() => Math.random() * 2 > 1)--> | |
| 93 | + <!--.map(item => item.key);--> | |
| 94 | + <!--},--> | |
| 95 | + <!--handleChange3 (newTargetKeys) {--> | |
| 96 | + <!--this.targetKeys3 = newTargetKeys;--> | |
| 97 | + <!--},--> | |
| 98 | + <!--render3 (item) {--> | |
| 99 | + <!--return item.label + ' - ' + item.description;--> | |
| 100 | + <!--},--> | |
| 101 | + <!--reloadMockData () {--> | |
| 102 | + <!--this.data3 = this.getMockData();--> | |
| 103 | + <!--this.targetKeys3 = this.getTargetKeys();--> | |
| 104 | + <!--}--> | |
| 105 | + <!--}--> | |
| 106 | + <!--}--> | |
| 107 | +<!--</script>--> | |
| 108 | + | |
| 109 | 109 | <!--<template>--> |
| 110 | 110 | <!--<Transfer--> |
| 111 | 111 | <!--:data="data4"--> | ... | ... |
src/components/transfer/transfer.vue
| ... | ... | @@ -67,8 +67,8 @@ |
| 67 | 67 | return cloned; |
| 68 | 68 | } |
| 69 | 69 | |
| 70 | - const vNodes = this.$slots.default; | |
| 71 | - const clonedVNodes = vNodes.map(vnode => cloneVNode(vnode)); | |
| 70 | + const vNodes = this.$slots.default === undefined ? [] : this.$slots.default; | |
| 71 | + const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode)); | |
| 72 | 72 | |
| 73 | 73 | return createElement('div', { |
| 74 | 74 | 'class': this.classes | ... | ... |