Commit 16a87cde0974a58fc33f444ed76a976e42e39909
1 parent
5b19b5f5
fix transfer
Showing
2 changed files
with
89 additions
and
12 deletions
Show diff stats
examples/routers/transfer.vue
... | ... | @@ -50,13 +50,13 @@ |
50 | 50 | |
51 | 51 | <template> |
52 | 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"> | |
53 | + :data="data3" | |
54 | + :target-keys="targetKeys3" | |
55 | + :list-style="listStyle" | |
56 | + :render-format="render3" | |
57 | + :operations="['向左移动','向右移动']" | |
58 | + filterable | |
59 | + @on-change="handleChange3"> | |
60 | 60 | <div :style="{float: 'right', margin: '5px'}"> |
61 | 61 | <Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button> |
62 | 62 | </div> | ... | ... |
src/components/transfer/transfer.vue
1 | -<template> | |
1 | +<!-- <template> | |
2 | 2 | <div :class="classes"> |
3 | 3 | <List |
4 | 4 | ref="left" |
... | ... | @@ -15,11 +15,14 @@ |
15 | 15 | :filter-method="filterMethod" |
16 | 16 | :not-found-text="notFoundText"> |
17 | 17 | <slot></slot> |
18 | - </List><Operation | |
18 | + </List> | |
19 | + <Operation | |
19 | 20 | :prefix-cls="prefixCls" |
20 | 21 | :operations="operations" |
21 | 22 | :left-active="leftValidKeysCount > 0" |
22 | - :right-active="rightValidKeysCount > 0"></Operation><List | |
23 | + :right-active="rightValidKeysCount > 0"> | |
24 | + </Operation> | |
25 | + <List | |
23 | 26 | ref="right" |
24 | 27 | :prefix-cls="prefixCls + '-list'" |
25 | 28 | :data="rightData" |
... | ... | @@ -33,10 +36,10 @@ |
33 | 36 | :filter-placeholder="filterPlaceholder" |
34 | 37 | :filter-method="filterMethod" |
35 | 38 | :not-found-text="notFoundText"> |
36 | - <slot name="right"></slot> | |
39 | + <slot></slot> | |
37 | 40 | </List> |
38 | 41 | </div> |
39 | -</template> | |
42 | +</template> --> | |
40 | 43 | <script> |
41 | 44 | import List from './list.vue'; |
42 | 45 | import Operation from './operation.vue'; |
... | ... | @@ -45,6 +48,80 @@ |
45 | 48 | const prefixCls = 'ivu-transfer'; |
46 | 49 | |
47 | 50 | export default { |
51 | + render (createElement) { | |
52 | + | |
53 | + function cloneVNode (vnode) { | |
54 | + const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode)) || vnode.text; | |
55 | + const cloned = createElement(vnode.tag, vnode.data, clonedChildren); | |
56 | + cloned.text = vnode.text; | |
57 | + cloned.isComment = vnode.isComment; | |
58 | + cloned.componentOptions = vnode.componentOptions; | |
59 | + cloned.elm = vnode.elm; | |
60 | + cloned.context = vnode.context; | |
61 | + cloned.ns = vnode.ns; | |
62 | + cloned.isStatic = vnode.isStatic; | |
63 | + cloned.key = vnode.key; | |
64 | + | |
65 | + return cloned; | |
66 | + } | |
67 | + | |
68 | + const vNodes = this.$slots.default; | |
69 | + const clonedVNodes = vNodes.map(vnode => cloneVNode(vnode)); | |
70 | + | |
71 | + return createElement('div', { | |
72 | + 'class': this.classes | |
73 | + }, [ | |
74 | + createElement('List', { | |
75 | + ref: 'left', | |
76 | + props: { | |
77 | + prefixCls: this.prefixCls + '-list', | |
78 | + data: this.leftData, | |
79 | + renderFormat: this.renderFormat, | |
80 | + checkedKeys: this.leftCheckedKeys, | |
81 | + validKeysCount: this.leftValidKeysCount, | |
82 | + style: this.listStyle, | |
83 | + title: this.titles[0], | |
84 | + filterable: this.filterable, | |
85 | + filterPlaceholder: this.filterPlaceholder, | |
86 | + filterMethod: this.filterMethod, | |
87 | + notFoundText: this.notFoundText | |
88 | + }, | |
89 | + on: { | |
90 | + 'on-checked-keys-change': this.handleLeftCheckedKeysChange | |
91 | + } | |
92 | + }, vNodes), | |
93 | + | |
94 | + createElement('Operation', { | |
95 | + props: { | |
96 | + prefixCls: this.prefixCls, | |
97 | + operations: this.operations, | |
98 | + leftActive: this.leftValidKeysCount > 0, | |
99 | + rightActive: this.rightValidKeysCount > 0 | |
100 | + } | |
101 | + }), | |
102 | + | |
103 | + createElement('List', { | |
104 | + ref: 'right', | |
105 | + props: { | |
106 | + prefixCls: this.prefixCls + '-list', | |
107 | + data: this.rightData, | |
108 | + renderFormat: this.renderFormat, | |
109 | + checkedKeys: this.rightCheckedKeys, | |
110 | + validKeysCount: this.rightValidKeysCount, | |
111 | + style: this.listStyle, | |
112 | + title: this.titles[1], | |
113 | + filterable: this.filterable, | |
114 | + filterPlaceholder: this.filterPlaceholder, | |
115 | + filterMethod: this.filterMethod, | |
116 | + notFoundText: this.notFoundText | |
117 | + }, | |
118 | + on: { | |
119 | + 'on-checked-keys-change': this.handleRightCheckedKeysChange | |
120 | + } | |
121 | + }, clonedVNodes), | |
122 | + ]); | |
123 | + }, | |
124 | + | |
48 | 125 | components: { List, Operation }, |
49 | 126 | props: { |
50 | 127 | data: { | ... | ... |