update Tree demo
This commit is contained in:
parent
174836c4ef
commit
b64204fd27
1 changed files with 171 additions and 67 deletions
|
@ -1,94 +1,198 @@
|
||||||
|
<!--<template>-->
|
||||||
|
<!--<div>-->
|
||||||
|
<!--<Tree :data="baseData" :load-data="loadData" multiple :render="renderFunc"></Tree>-->
|
||||||
|
<!--<Button @click="handleAdd">add</Button>-->
|
||||||
|
<!--<Button @click="handleUpdate">update</Button>-->
|
||||||
|
<!--</div>-->
|
||||||
|
<!--</template>-->
|
||||||
|
<!--<script>-->
|
||||||
|
<!--export default {-->
|
||||||
|
<!--data () {-->
|
||||||
|
<!--return {-->
|
||||||
|
<!--baseData: [-->
|
||||||
|
<!--{-->
|
||||||
|
<!--expand: true,-->
|
||||||
|
<!--title: 'parent 1',-->
|
||||||
|
<!--children: [-->
|
||||||
|
<!--{-->
|
||||||
|
<!--title: 'parent 1-0',-->
|
||||||
|
<!--expand: false,-->
|
||||||
|
<!--children: [],-->
|
||||||
|
<!--loading: false-->
|
||||||
|
<!--},-->
|
||||||
|
<!--{-->
|
||||||
|
<!--title: 'parent 1-1',-->
|
||||||
|
<!--expand: true,-->
|
||||||
|
<!--checked: true,-->
|
||||||
|
<!--children: [-->
|
||||||
|
<!--{-->
|
||||||
|
<!--title: 'leaf',-->
|
||||||
|
<!--render: (h, { node }) => {-->
|
||||||
|
<!--return h('Button', {-->
|
||||||
|
<!--props: {-->
|
||||||
|
<!--type: 'primary',-->
|
||||||
|
<!--size: 'small'-->
|
||||||
|
<!--},-->
|
||||||
|
<!--on: {-->
|
||||||
|
<!--click: ({target}) => {-->
|
||||||
|
<!--this.logger(target.textContent);-->
|
||||||
|
<!--}-->
|
||||||
|
<!--}-->
|
||||||
|
<!--}, node.title + '000');-->
|
||||||
|
<!--}-->
|
||||||
|
<!--}-->
|
||||||
|
<!--]-->
|
||||||
|
<!--}-->
|
||||||
|
<!--]-->
|
||||||
|
<!--}-->
|
||||||
|
<!--]-->
|
||||||
|
<!--};-->
|
||||||
|
<!--},-->
|
||||||
|
<!--methods: {-->
|
||||||
|
<!--handleAdd () {-->
|
||||||
|
<!--this.baseData.push(-->
|
||||||
|
<!--{-->
|
||||||
|
<!--title: 'test name',-->
|
||||||
|
<!--checked: true-->
|
||||||
|
<!--}-->
|
||||||
|
<!--);-->
|
||||||
|
<!--},-->
|
||||||
|
<!--handleUpdate () {-->
|
||||||
|
<!--const child = this.baseData[0].children[0].children[1];-->
|
||||||
|
<!--// console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));-->
|
||||||
|
<!--if (!child) return this.$Message.error('Node is async and is not loaded yet');-->
|
||||||
|
<!--else this.$set(child, 'checked', true);-->
|
||||||
|
<!--},-->
|
||||||
|
<!--logger (txt) {-->
|
||||||
|
<!--console.log(txt);-->
|
||||||
|
<!--},-->
|
||||||
|
<!--loadData (item, callback) {-->
|
||||||
|
<!--setTimeout(() => {-->
|
||||||
|
<!--callback([-->
|
||||||
|
<!--{-->
|
||||||
|
<!--title: 'children-1',-->
|
||||||
|
<!--// loading: false,-->
|
||||||
|
<!--children: []-->
|
||||||
|
<!--},-->
|
||||||
|
<!--{-->
|
||||||
|
<!--title: 'children-2',-->
|
||||||
|
<!--// loading: false,-->
|
||||||
|
<!--children: []-->
|
||||||
|
<!--}-->
|
||||||
|
<!--]);-->
|
||||||
|
<!--}, 2000);-->
|
||||||
|
<!--},-->
|
||||||
|
<!--renderFunc (h, { node }) {-->
|
||||||
|
<!--return h('Button', {-->
|
||||||
|
<!--props: {-->
|
||||||
|
<!--type: 'ghost'-->
|
||||||
|
<!--}-->
|
||||||
|
<!--}, node.title)-->
|
||||||
|
<!--}-->
|
||||||
|
<!--}-->
|
||||||
|
<!--};-->
|
||||||
|
<!--</script>-->
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div style="width: 400px;">
|
||||||
<Tree :data="baseData" :load-data="loadData" multiple :render="renderFunc"></Tree>
|
<Tree :data="data4" :render="renderContent"></Tree>
|
||||||
<Button @click="handleAdd">add</Button>
|
|
||||||
<Button @click="handleUpdate">update</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
baseData: [
|
data4: [
|
||||||
{
|
{
|
||||||
expand: true,
|
|
||||||
title: 'parent 1',
|
title: 'parent 1',
|
||||||
|
expand: true,
|
||||||
children: [
|
children: [
|
||||||
{
|
|
||||||
title: 'parent 1-0',
|
|
||||||
expand: false,
|
|
||||||
children: [],
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'parent 1-1',
|
title: 'parent 1-1',
|
||||||
expand: true,
|
expand: true,
|
||||||
checked: true,
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: 'leaf',
|
title: 'leaf 1-1-1',
|
||||||
render: (h, { node }) => {
|
expand: true
|
||||||
return h('Button', {
|
},
|
||||||
props: {
|
{
|
||||||
type: 'primary',
|
title: 'leaf 1-1-2',
|
||||||
size: 'small'
|
expand: true
|
||||||
},
|
}
|
||||||
on: {
|
]
|
||||||
click: ({target}) => {
|
},
|
||||||
this.logger(target.textContent);
|
{
|
||||||
}
|
title: 'parent 1-2',
|
||||||
}
|
expand: true,
|
||||||
}, node.title + '000');
|
children: [
|
||||||
}
|
{
|
||||||
|
title: 'leaf 1-2-1',
|
||||||
|
expand: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'leaf 1-2-1',
|
||||||
|
expand: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
};
|
buttonProps: {
|
||||||
|
type: 'ghost',
|
||||||
|
size: 'small',
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleAdd () {
|
renderContent (h, { node }) {
|
||||||
this.baseData.push(
|
return h('span', {
|
||||||
{
|
style: {
|
||||||
title: 'test name',
|
display: 'inline-block',
|
||||||
checked: true
|
width: '100%'
|
||||||
}
|
}
|
||||||
);
|
}, [
|
||||||
},
|
h('span', node.title),
|
||||||
handleUpdate () {
|
h('span', {
|
||||||
const child = this.baseData[0].children[0].children[1];
|
style: {
|
||||||
// console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));
|
display: 'inline-block',
|
||||||
if (!child) return this.$Message.error('Node is async and is not loaded yet');
|
float: 'right',
|
||||||
else this.$set(child, 'checked', true);
|
marginRight: '32px'
|
||||||
},
|
|
||||||
logger (txt) {
|
|
||||||
console.log(txt);
|
|
||||||
},
|
|
||||||
loadData (item, callback) {
|
|
||||||
setTimeout(() => {
|
|
||||||
callback([
|
|
||||||
{
|
|
||||||
title: 'children-1',
|
|
||||||
// loading: false,
|
|
||||||
children: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'children-2',
|
|
||||||
// loading: false,
|
|
||||||
children: []
|
|
||||||
}
|
}
|
||||||
]);
|
}, [
|
||||||
}, 2000);
|
h('Button', {
|
||||||
|
props: Object.assign({}, this.buttonProps, {
|
||||||
|
icon: 'ios-plus-empty'
|
||||||
|
}),
|
||||||
|
style: {
|
||||||
|
marginRight: '8px'
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
click: () => { this.append(node) }
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
h('Button', {
|
||||||
|
props: Object.assign({}, this.buttonProps, {
|
||||||
|
icon: 'ios-minus-empty'
|
||||||
|
}),
|
||||||
|
on: {
|
||||||
|
click: () => { this.remove(node) }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
])
|
||||||
|
]);
|
||||||
},
|
},
|
||||||
renderFunc (h, { node }) {
|
append (node) {
|
||||||
return h('Button', {
|
this.$set(node, 'children', [{
|
||||||
props: {
|
title: 'appended node',
|
||||||
type: 'ghost'
|
expand: true
|
||||||
}
|
}]);
|
||||||
}, node.title)
|
},
|
||||||
|
remove (node) {
|
||||||
|
const parent = node.parent;
|
||||||
|
console.log(node);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
Loading…
Add table
Reference in a new issue