Commit 97098fcd85c26743e8630111dc37088d0db78151
1 parent
b64204fd
update Tree example
Showing
3 changed files
with
21 additions
and
10 deletions
Show diff stats
examples/routers/tree.vue
@@ -146,14 +146,14 @@ | @@ -146,14 +146,14 @@ | ||
146 | } | 146 | } |
147 | }, | 147 | }, |
148 | methods: { | 148 | methods: { |
149 | - renderContent (h, { node }) { | 149 | + renderContent (h, { data, node }) { |
150 | return h('span', { | 150 | return h('span', { |
151 | style: { | 151 | style: { |
152 | display: 'inline-block', | 152 | display: 'inline-block', |
153 | width: '100%' | 153 | width: '100%' |
154 | } | 154 | } |
155 | }, [ | 155 | }, [ |
156 | - h('span', node.title), | 156 | + h('span', data.title), |
157 | h('span', { | 157 | h('span', { |
158 | style: { | 158 | style: { |
159 | display: 'inline-block', | 159 | display: 'inline-block', |
@@ -169,7 +169,7 @@ | @@ -169,7 +169,7 @@ | ||
169 | marginRight: '8px' | 169 | marginRight: '8px' |
170 | }, | 170 | }, |
171 | on: { | 171 | on: { |
172 | - click: () => { this.append(node) } | 172 | + click: () => { this.append(node, data) } |
173 | } | 173 | } |
174 | }), | 174 | }), |
175 | h('Button', { | 175 | h('Button', { |
@@ -177,21 +177,22 @@ | @@ -177,21 +177,22 @@ | ||
177 | icon: 'ios-minus-empty' | 177 | icon: 'ios-minus-empty' |
178 | }), | 178 | }), |
179 | on: { | 179 | on: { |
180 | - click: () => { this.remove(node) } | 180 | + click: () => { this.remove(node, data) } |
181 | } | 181 | } |
182 | }) | 182 | }) |
183 | ]) | 183 | ]) |
184 | ]); | 184 | ]); |
185 | }, | 185 | }, |
186 | - append (node) { | ||
187 | - this.$set(node, 'children', [{ | 186 | + append (node, data) { |
187 | + this.$set(data, 'children', [{ | ||
188 | title: 'appended node', | 188 | title: 'appended node', |
189 | expand: true | 189 | expand: true |
190 | }]); | 190 | }]); |
191 | }, | 191 | }, |
192 | - remove (node) { | 192 | + remove (node, data) { |
193 | const parent = node.parent; | 193 | const parent = node.parent; |
194 | console.log(node); | 194 | console.log(node); |
195 | + console.log(data); | ||
195 | } | 196 | } |
196 | } | 197 | } |
197 | } | 198 | } |
src/components/tree/node.vue
@@ -12,8 +12,8 @@ | @@ -12,8 +12,8 @@ | ||
12 | :indeterminate="data.indeterminate" | 12 | :indeterminate="data.indeterminate" |
13 | :disabled="data.disabled || data.disableCheckbox" | 13 | :disabled="data.disabled || data.disableCheckbox" |
14 | @click.native.prevent="handleCheck"></Checkbox> | 14 | @click.native.prevent="handleCheck"></Checkbox> |
15 | - <Render v-if="data.render" :render="data.render" :node="data"></Render> | ||
16 | - <Render v-else-if="isParentRender" :render="parentRender" :node="data"></Render> | 15 | + <Render v-if="data.render" :render="data.render" :data="data" :node="node"></Render> |
16 | + <Render v-else-if="isParentRender" :render="parentRender" :data="data" :node="node"></Render> | ||
17 | <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span> | 17 | <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span> |
18 | <Tree-node | 18 | <Tree-node |
19 | v-if="data.expand" | 19 | v-if="data.expand" |
@@ -109,6 +109,14 @@ | @@ -109,6 +109,14 @@ | ||
109 | } else { | 109 | } else { |
110 | return null; | 110 | return null; |
111 | } | 111 | } |
112 | + }, | ||
113 | + node () { | ||
114 | + const Tree = findComponentUpward(this, 'Tree'); | ||
115 | + if (Tree) { | ||
116 | + return Tree.flatState.find(item => item.nodeKey === this.data.nodeKey); | ||
117 | + } else { | ||
118 | + return {}; | ||
119 | + } | ||
112 | } | 120 | } |
113 | }, | 121 | }, |
114 | methods: { | 122 | methods: { |
src/components/tree/render.js
@@ -3,11 +3,13 @@ export default { | @@ -3,11 +3,13 @@ export default { | ||
3 | functional: true, | 3 | functional: true, |
4 | props: { | 4 | props: { |
5 | render: Function, | 5 | render: Function, |
6 | + data: Object, | ||
6 | node: Object | 7 | node: Object |
7 | }, | 8 | }, |
8 | render: (h, ctx) => { | 9 | render: (h, ctx) => { |
9 | const params = { | 10 | const params = { |
10 | - node: ctx.props.node | 11 | + node: ctx.props.node, |
12 | + data: ctx.props.data | ||
11 | }; | 13 | }; |
12 | return ctx.props.render(h, params); | 14 | return ctx.props.render(h, params); |
13 | } | 15 | } |