drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Tree demo

Browse source
This commit is contained in:
梁灏 2017-10-25 17:41:37 +08:00
parent 174836c4ef
commit b64204fd27
1 changed files with 171 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

230
examples/routers/tree.vue
View file

@ -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',
size: 'small'
}, },
on: { {
click: ({target}) => { title: 'leaf 1-1-2',
this.logger(target.textContent); expand: true
}
}
}, node.title + '000');
} }
]
},
{
title: 'parent 1-2',
expand: true,
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: []
} }
}, [
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) }
}
})
])
]); ]);
}, 2000);
}, },
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>