247 lines
9.9 KiB
Vue
247 lines
9.9 KiB
Vue
<!--<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>-->
|
|
<!--<div style="width: 400px;">-->
|
|
<!--<Tree :data="data4" :render="renderContent"></Tree>-->
|
|
<!--</div>-->
|
|
<!--</template>-->
|
|
<!--<script>-->
|
|
<!--export default {-->
|
|
<!--data () {-->
|
|
<!--return {-->
|
|
<!--data4: [-->
|
|
<!--{-->
|
|
<!--title: 'parent 1',-->
|
|
<!--expand: true,-->
|
|
<!--children: [-->
|
|
<!--{-->
|
|
<!--title: 'parent 1-1',-->
|
|
<!--expand: true,-->
|
|
<!--children: [-->
|
|
<!--{-->
|
|
<!--title: 'leaf 1-1-1',-->
|
|
<!--expand: true-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: 'leaf 1-1-2',-->
|
|
<!--expand: true-->
|
|
<!--}-->
|
|
<!--]-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--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: {-->
|
|
<!--renderContent (h, { data, node, root }) {-->
|
|
<!--return h('span', {-->
|
|
<!--style: {-->
|
|
<!--display: 'inline-block',-->
|
|
<!--width: '100%'-->
|
|
<!--}-->
|
|
<!--}, [-->
|
|
<!--h('span', data.title),-->
|
|
<!--h('span', {-->
|
|
<!--style: {-->
|
|
<!--display: 'inline-block',-->
|
|
<!--float: 'right',-->
|
|
<!--marginRight: '32px'-->
|
|
<!--}-->
|
|
<!--}, [-->
|
|
<!--h('Button', {-->
|
|
<!--props: Object.assign({}, this.buttonProps, {-->
|
|
<!--icon: 'ios-plus-empty'-->
|
|
<!--}),-->
|
|
<!--style: {-->
|
|
<!--marginRight: '8px'-->
|
|
<!--},-->
|
|
<!--on: {-->
|
|
<!--click: () => { this.append(data) }-->
|
|
<!--}-->
|
|
<!--}),-->
|
|
<!--h('Button', {-->
|
|
<!--props: Object.assign({}, this.buttonProps, {-->
|
|
<!--icon: 'ios-minus-empty'-->
|
|
<!--}),-->
|
|
<!--on: {-->
|
|
<!--click: () => { this.remove(node, data, root) }-->
|
|
<!--}-->
|
|
<!--})-->
|
|
<!--])-->
|
|
<!--]);-->
|
|
<!--},-->
|
|
<!--append (data) {-->
|
|
<!--this.$set(data, 'children', [{-->
|
|
<!--title: 'appended node',-->
|
|
<!--expand: true-->
|
|
<!--}]);-->
|
|
<!--},-->
|
|
<!--remove (node, data, root) {-->
|
|
<!--const parentKey = root.find(el => el === node).parent;-->
|
|
<!--const parent = root.find(el => el.nodeKey === parentKey).node;-->
|
|
<!--const index = parent.children.indexOf(data);-->
|
|
<!--parent.children.splice(index, 1);-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--</script>-->
|
|
|
|
<template>
|
|
<div>
|
|
{{ data1 }}
|
|
<Tree :data="data1"></Tree>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
data1: [
|
|
{
|
|
title: 'parent 1',
|
|
expand: true,
|
|
children: [
|
|
{
|
|
title: 'parent 1-1',
|
|
expand: true,
|
|
children: [
|
|
{
|
|
title: 'leaf 1-1-1'
|
|
},
|
|
{
|
|
title: 'leaf 1-1-2'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'parent 1-2',
|
|
expand: true,
|
|
children: [
|
|
{
|
|
title: 'leaf 1-2-1'
|
|
},
|
|
{
|
|
title: 'leaf 1-2-1'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|