other / 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 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 100 </div>
7 101 </template>
8 102 <script>
9 103 export default {
10 104 data () {
11 105 return {
12   - baseData: [
  106 + data4: [
13 107 {
14   - expand: true,
15 108 title: 'parent 1',
  109 + expand: true,
16 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 127 expand: true,
26   - checked: true,
27 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 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 199 \ No newline at end of file
... ...