update Tree example
This commit is contained in:
parent
b64204fd27
commit
97098fcd85
3 changed files with 21 additions and 10 deletions
|
@ -146,14 +146,14 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
renderContent (h, { node }) {
|
renderContent (h, { data, node }) {
|
||||||
return h('span', {
|
return h('span', {
|
||||||
style: {
|
style: {
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
width: '100%'
|
width: '100%'
|
||||||
}
|
}
|
||||||
}, [
|
}, [
|
||||||
h('span', node.title),
|
h('span', data.title),
|
||||||
h('span', {
|
h('span', {
|
||||||
style: {
|
style: {
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
|
@ -169,7 +169,7 @@
|
||||||
marginRight: '8px'
|
marginRight: '8px'
|
||||||
},
|
},
|
||||||
on: {
|
on: {
|
||||||
click: () => { this.append(node) }
|
click: () => { this.append(node, data) }
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
h('Button', {
|
h('Button', {
|
||||||
|
@ -177,21 +177,22 @@
|
||||||
icon: 'ios-minus-empty'
|
icon: 'ios-minus-empty'
|
||||||
}),
|
}),
|
||||||
on: {
|
on: {
|
||||||
click: () => { this.remove(node) }
|
click: () => { this.remove(node, data) }
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
},
|
},
|
||||||
append (node) {
|
append (node, data) {
|
||||||
this.$set(node, 'children', [{
|
this.$set(data, 'children', [{
|
||||||
title: 'appended node',
|
title: 'appended node',
|
||||||
expand: true
|
expand: true
|
||||||
}]);
|
}]);
|
||||||
},
|
},
|
||||||
remove (node) {
|
remove (node, data) {
|
||||||
const parent = node.parent;
|
const parent = node.parent;
|
||||||
console.log(node);
|
console.log(node);
|
||||||
|
console.log(data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,8 +12,8 @@
|
||||||
:indeterminate="data.indeterminate"
|
:indeterminate="data.indeterminate"
|
||||||
:disabled="data.disabled || data.disableCheckbox"
|
:disabled="data.disabled || data.disableCheckbox"
|
||||||
@click.native.prevent="handleCheck"></Checkbox>
|
@click.native.prevent="handleCheck"></Checkbox>
|
||||||
<Render v-if="data.render" :render="data.render" :node="data"></Render>
|
<Render v-if="data.render" :render="data.render" :data="data" :node="node"></Render>
|
||||||
<Render v-else-if="isParentRender" :render="parentRender" :node="data"></Render>
|
<Render v-else-if="isParentRender" :render="parentRender" :data="data" :node="node"></Render>
|
||||||
<span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
|
<span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
|
||||||
<Tree-node
|
<Tree-node
|
||||||
v-if="data.expand"
|
v-if="data.expand"
|
||||||
|
@ -109,6 +109,14 @@
|
||||||
} else {
|
} else {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
node () {
|
||||||
|
const Tree = findComponentUpward(this, 'Tree');
|
||||||
|
if (Tree) {
|
||||||
|
return Tree.flatState.find(item => item.nodeKey === this.data.nodeKey);
|
||||||
|
} else {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -3,11 +3,13 @@ export default {
|
||||||
functional: true,
|
functional: true,
|
||||||
props: {
|
props: {
|
||||||
render: Function,
|
render: Function,
|
||||||
|
data: Object,
|
||||||
node: Object
|
node: Object
|
||||||
},
|
},
|
||||||
render: (h, ctx) => {
|
render: (h, ctx) => {
|
||||||
const params = {
|
const params = {
|
||||||
node: ctx.props.node
|
node: ctx.props.node,
|
||||||
|
data: ctx.props.data
|
||||||
};
|
};
|
||||||
return ctx.props.render(h, params);
|
return ctx.props.render(h, params);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue