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
@@ -11,7 +11,7 @@ | @@ -11,7 +11,7 @@ | ||
11 | <Form-item prop="user"> | 11 | <Form-item prop="user"> |
12 | <Input v-model="formInline.user"></Input> | 12 | <Input v-model="formInline.user"></Input> |
13 | </Form-item> | 13 | </Form-item> |
14 | - <Form-item> | 14 | + <Form-item prop="targetKeys1"> |
15 | <Transfer | 15 | <Transfer |
16 | :data="formInline.data1" | 16 | :data="formInline.data1" |
17 | :target-keys="formInline.targetKeys1" | 17 | :target-keys="formInline.targetKeys1" |
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 | <template> | 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 | </template> | 10 | </template> |
65 | <script> | 11 | <script> |
66 | export default { | 12 | export default { |
67 | data () { | 13 | data () { |
68 | return { | 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 | methods: { | 19 | methods: { |
@@ -92,20 +34,78 @@ | @@ -92,20 +34,78 @@ | ||
92 | .filter(() => Math.random() * 2 > 1) | 34 | .filter(() => Math.random() * 2 > 1) |
93 | .map(item => item.key); | 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 | </script> | 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 | <!--<template>--> | 109 | <!--<template>--> |
110 | <!--<Transfer--> | 110 | <!--<Transfer--> |
111 | <!--:data="data4"--> | 111 | <!--:data="data4"--> |
src/components/transfer/transfer.vue
@@ -67,8 +67,8 @@ | @@ -67,8 +67,8 @@ | ||
67 | return cloned; | 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 | return createElement('div', { | 73 | return createElement('div', { |
74 | 'class': this.classes | 74 | 'class': this.classes |