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 | ... | ... |