chenhaodong / mew-iview

Commit b64204fd2792d1716000aa281807fa0a72893653

Authored by 梁灏
1 parent 174836c4

update Tree demo

Showing 1 changed file with 170 additions and 66 deletions   Show diff stats
Inline Side-by-side
examples/routers/tree.vue
  Show/Hide comments   View file @b64204f
  1 +<!--<template>-->
  2 + <!--<div>-->
  3 + <!--<Tree :data="baseData" :load-data="loadData" multiple :render="renderFunc"></Tree>-->
  4 + <!--<Button @click="handleAdd">add</Button>-->
  5 + <!--<Button @click="handleUpdate">update</Button>-->
  6 + <!--</div>-->
  7 +<!--</template>-->
  8 +<!--<script>-->
  9 + <!--export default {-->
  10 + <!--data () {-->
  11 + <!--return {-->
  12 + <!--baseData: [-->
  13 + <!--{-->
  14 + <!--expand: true,-->
  15 + <!--title: 'parent 1',-->
  16 + <!--children: [-->
  17 + <!--{-->
  18 + <!--title: 'parent 1-0',-->
  19 + <!--expand: false,-->
  20 + <!--children: [],-->
  21 + <!--loading: false-->
  22 + <!--},-->
  23 + <!--{-->
  24 + <!--title: 'parent 1-1',-->
  25 + <!--expand: true,-->
  26 + <!--checked: true,-->
  27 + <!--children: [-->
  28 + <!--{-->
  29 + <!--title: 'leaf',-->
  30 + <!--render: (h, { node }) => {-->
  31 + <!--return h('Button', {-->
  32 + <!--props: {-->
  33 + <!--type: 'primary',-->
  34 + <!--size: 'small'-->
  35 + <!--},-->
  36 + <!--on: {-->
  37 + <!--click: ({target}) => {-->
  38 + <!--this.logger(target.textContent);-->
  39 + <!--}-->
  40 + <!--}-->
  41 + <!--}, node.title + '000');-->
  42 + <!--}-->
  43 + <!--}-->
  44 + <!--]-->
  45 + <!--}-->
  46 + <!--]-->
  47 + <!--}-->
  48 + <!--]-->
  49 + <!--};-->
  50 + <!--},-->
  51 + <!--methods: {-->
  52 + <!--handleAdd () {-->
  53 + <!--this.baseData.push(-->
  54 + <!--{-->
  55 + <!--title: 'test name',-->
  56 + <!--checked: true-->
  57 + <!--}-->
  58 + <!--);-->
  59 + <!--},-->
  60 + <!--handleUpdate () {-->
  61 + <!--const child = this.baseData[0].children[0].children[1];-->
  62 + <!--// console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));-->
  63 + <!--if (!child) return this.$Message.error('Node is async and is not loaded yet');-->
  64 + <!--else this.$set(child, 'checked', true);-->
  65 + <!--},-->
  66 + <!--logger (txt) {-->
  67 + <!--console.log(txt);-->
  68 + <!--},-->
  69 + <!--loadData (item, callback) {-->
  70 + <!--setTimeout(() => {-->
  71 + <!--callback([-->
  72 + <!--{-->
  73 + <!--title: 'children-1',-->
  74 +<!--// loading: false,-->
  75 + <!--children: []-->
  76 + <!--},-->
  77 + <!--{-->
  78 + <!--title: 'children-2',-->
  79 +<!--// loading: false,-->
  80 + <!--children: []-->
  81 + <!--}-->
  82 + <!--]);-->
  83 + <!--}, 2000);-->
  84 + <!--},-->
  85 + <!--renderFunc (h, { node }) {-->
  86 + <!--return h('Button', {-->
  87 + <!--props: {-->
  88 + <!--type: 'ghost'-->
  89 + <!--}-->
  90 + <!--}, node.title)-->
  91 + <!--}-->
  92 + <!--}-->
  93 + <!--};-->
  94 +<!--</script>-->
  95 +
  96 +
1 <template> 97 <template>
2 - <div>  
3 - <Tree :data="baseData" :load-data="loadData" multiple :render="renderFunc"></Tree>  
4 - <Button @click="handleAdd">add</Button>  
5 - <Button @click="handleUpdate">update</Button> 98 + <div style="width: 400px;">
  99 + <Tree :data="data4" :render="renderContent"></Tree>
6 </div> 100 </div>
7 </template> 101 </template>
8 <script> 102 <script>
9 export default { 103 export default {
10 data () { 104 data () {
11 return { 105 return {
12 - baseData: [ 106 + data4: [
13 { 107 {
14 - expand: true,  
15 title: 'parent 1', 108 title: 'parent 1',
  109 + expand: true,
16 children: [ 110 children: [
17 { 111 {
18 - title: 'parent 1-0',  
19 - expand: false,  
20 - children: [],  
21 - loading: false 112 + title: 'parent 1-1',
  113 + expand: true,
  114 + children: [
  115 + {
  116 + title: 'leaf 1-1-1',
  117 + expand: true
  118 + },
  119 + {
  120 + title: 'leaf 1-1-2',
  121 + expand: true
  122 + }
  123 + ]
22 }, 124 },
23 { 125 {
24 - title: 'parent 1-1', 126 + title: 'parent 1-2',
25 expand: true, 127 expand: true,
26 - checked: true,  
27 children: [ 128 children: [
28 { 129 {
29 - title: 'leaf',  
30 - render: (h, { node }) => {  
31 - return h('Button', {  
32 - props: {  
33 - type: 'primary',  
34 - size: 'small'  
35 - },  
36 - on: {  
37 - click: ({target}) => {  
38 - this.logger(target.textContent);  
39 - }  
40 - }  
41 - }, node.title + '000');  
42 - } 130 + title: 'leaf 1-2-1',
  131 + expand: true
  132 + },
  133 + {
  134 + title: 'leaf 1-2-1',
  135 + expand: true
43 } 136 }
44 ] 137 ]
45 } 138 }
46 ] 139 ]
47 } 140 }
48 - ]  
49 - }; 141 + ],
  142 + buttonProps: {
  143 + type: 'ghost',
  144 + size: 'small',
  145 + }
  146 + }
50 }, 147 },
51 methods: { 148 methods: {
52 - handleAdd () {  
53 - this.baseData.push(  
54 - {  
55 - title: 'test name',  
56 - checked: true 149 + renderContent (h, { node }) {
  150 + return h('span', {
  151 + style: {
  152 + display: 'inline-block',
  153 + width: '100%'
57 } 154 }
58 - );  
59 - },  
60 - handleUpdate () {  
61 - const child = this.baseData[0].children[0].children[1];  
62 - // console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));  
63 - if (!child) return this.$Message.error('Node is async and is not loaded yet');  
64 - else this.$set(child, 'checked', true);  
65 - },  
66 - logger (txt) {  
67 - console.log(txt);  
68 - },  
69 - loadData (item, callback) {  
70 - setTimeout(() => {  
71 - callback([  
72 - {  
73 - title: 'children-1',  
74 -// loading: false,  
75 - children: []  
76 - },  
77 - {  
78 - title: 'children-2',  
79 -// loading: false,  
80 - children: [] 155 + }, [
  156 + h('span', node.title),
  157 + h('span', {
  158 + style: {
  159 + display: 'inline-block',
  160 + float: 'right',
  161 + marginRight: '32px'
81 } 162 }
82 - ]);  
83 - }, 2000); 163 + }, [
  164 + h('Button', {
  165 + props: Object.assign({}, this.buttonProps, {
  166 + icon: 'ios-plus-empty'
  167 + }),
  168 + style: {
  169 + marginRight: '8px'
  170 + },
  171 + on: {
  172 + click: () => { this.append(node) }
  173 + }
  174 + }),
  175 + h('Button', {
  176 + props: Object.assign({}, this.buttonProps, {
  177 + icon: 'ios-minus-empty'
  178 + }),
  179 + on: {
  180 + click: () => { this.remove(node) }
  181 + }
  182 + })
  183 + ])
  184 + ]);
84 }, 185 },
85 - renderFunc (h, { node }) {  
86 - return h('Button', {  
87 - props: {  
88 - type: 'ghost'  
89 - }  
90 - }, node.title) 186 + append (node) {
  187 + this.$set(node, 'children', [{
  188 + title: 'appended node',
  189 + expand: true
  190 + }]);
  191 + },
  192 + remove (node) {
  193 + const parent = node.parent;
  194 + console.log(node);
91 } 195 }
92 } 196 }
93 - };  
94 -</script> 197 + }
  198 +</script>
95 \ No newline at end of file 199 \ No newline at end of file