Commit 97098fcd85c26743e8630111dc37088d0db78151

Authored by 梁灏
1 parent b64204fd

update Tree example

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 }