Commit 6ff0e3400309ec454369d92b4a2c362e5529873d
1 parent
97098fcd
update Tree Render function
Showing
3 changed files
with
15 additions
and
12 deletions
Show diff stats
examples/routers/tree.vue
| @@ -146,7 +146,7 @@ | @@ -146,7 +146,7 @@ | ||
| 146 | } | 146 | } |
| 147 | }, | 147 | }, |
| 148 | methods: { | 148 | methods: { |
| 149 | - renderContent (h, { data, node }) { | 149 | + renderContent (h, { data, node, root }) { |
| 150 | return h('span', { | 150 | return h('span', { |
| 151 | style: { | 151 | style: { |
| 152 | display: 'inline-block', | 152 | 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, data) } | 172 | + click: () => { this.append(data) } |
| 173 | } | 173 | } |
| 174 | }), | 174 | }), |
| 175 | h('Button', { | 175 | h('Button', { |
| @@ -177,22 +177,23 @@ | @@ -177,22 +177,23 @@ | ||
| 177 | icon: 'ios-minus-empty' | 177 | icon: 'ios-minus-empty' |
| 178 | }), | 178 | }), |
| 179 | on: { | 179 | on: { |
| 180 | - click: () => { this.remove(node, data) } | 180 | + click: () => { this.remove(node, data, root) } |
| 181 | } | 181 | } |
| 182 | }) | 182 | }) |
| 183 | ]) | 183 | ]) |
| 184 | ]); | 184 | ]); |
| 185 | }, | 185 | }, |
| 186 | - append (node, data) { | 186 | + append (data) { |
| 187 | this.$set(data, 'children', [{ | 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, data) { | ||
| 193 | - const parent = node.parent; | ||
| 194 | - console.log(node); | ||
| 195 | - console.log(data); | 192 | + remove (node, data, root) { |
| 193 | + const parentKey = root.find(el => el === node).parent; | ||
| 194 | + const parent = root.find(el => el.nodeKey === parentKey).node; | ||
| 195 | + const index = parent.children.indexOf(data); | ||
| 196 | + parent.children.splice(index, 1); | ||
| 196 | } | 197 | } |
| 197 | } | 198 | } |
| 198 | } | 199 | } |
src/components/tree/node.vue
| @@ -113,9 +113,10 @@ | @@ -113,9 +113,10 @@ | ||
| 113 | node () { | 113 | node () { |
| 114 | const Tree = findComponentUpward(this, 'Tree'); | 114 | const Tree = findComponentUpward(this, 'Tree'); |
| 115 | if (Tree) { | 115 | if (Tree) { |
| 116 | - return Tree.flatState.find(item => item.nodeKey === this.data.nodeKey); | 116 | + // 将所有的 node(即flatState)和当前 node 都传递 |
| 117 | + return [Tree.flatState, Tree.flatState.find(item => item.nodeKey === this.data.nodeKey)]; | ||
| 117 | } else { | 118 | } else { |
| 118 | - return {}; | 119 | + return []; |
| 119 | } | 120 | } |
| 120 | } | 121 | } |
| 121 | }, | 122 | }, |
src/components/tree/render.js
| @@ -4,11 +4,12 @@ export default { | @@ -4,11 +4,12 @@ export default { | ||
| 4 | props: { | 4 | props: { |
| 5 | render: Function, | 5 | render: Function, |
| 6 | data: Object, | 6 | data: Object, |
| 7 | - node: Object | 7 | + node: Array |
| 8 | }, | 8 | }, |
| 9 | render: (h, ctx) => { | 9 | render: (h, ctx) => { |
| 10 | const params = { | 10 | const params = { |
| 11 | - node: ctx.props.node, | 11 | + root: ctx.props.node[0], |
| 12 | + node: ctx.props.node[1], | ||
| 12 | data: ctx.props.data | 13 | data: ctx.props.data |
| 13 | }; | 14 | }; |
| 14 | return ctx.props.render(h, params); | 15 | return ctx.props.render(h, params); |