other / mew-iview

Commit 174836c4ef1c0d7d6b848f528e5338a4b61ccec4

Authored by 梁灏
1 parent 3ea24615

update Tree Render function use

Showing 4 changed files with 103 additions and 117 deletions   Show diff stats
Inline Side-by-side
examples/routers/tree.vue
  Show/Hide comments   View file @174836c
1 -<!--<template>-->  
2 - <!--<div>-->  
3 - <!--<Tree :data="baseData" :load-data="loadData" multiple></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: '<span style="color: red">leaf</span>',-->  
30 - <!--render: (h) => {-->  
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 - <!--}, 'I\'m a button!');-->  
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 - <!--}-->  
86 - <!--};-->  
87 -<!--</script>-->  
88 -  
89 <template> 1 <template>
90 - <Tree :data="data3" show-checkbox multiple></Tree> 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>
91 </template> 7 </template>
92 <script> 8 <script>
93 export default { 9 export default {
94 data () { 10 data () {
95 return { 11 return {
96 - data3: [ 12 + baseData: [
97 { 13 {
98 - title: 'parent 1',  
99 expand: true, 14 expand: true,
100 - selected: true, 15 + title: 'parent 1',
101 children: [ 16 children: [
102 { 17 {
103 - title: 'parent 1-1',  
104 - expand: true,  
105 - disabled: true,  
106 - children: [  
107 - {  
108 - title: 'leaf 1-1-1',  
109 - disabled: true  
110 - },  
111 - {  
112 - title: 'leaf 1-1-2'  
113 - }  
114 - ] 18 + title: 'parent 1-0',
  19 + expand: false,
  20 + children: [],
  21 + loading: false
115 }, 22 },
116 { 23 {
117 - title: 'parent 1-2', 24 + title: 'parent 1-1',
118 expand: true, 25 expand: true,
  26 + checked: true,
119 children: [ 27 children: [
120 { 28 {
121 - title: 'leaf 1-2-1',  
122 - checked: true  
123 - },  
124 - {  
125 - title: 'leaf 1-2-1' 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 + }
126 } 43 }
127 ] 44 ]
128 } 45 }
129 ] 46 ]
130 } 47 }
131 ] 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)
132 } 91 }
133 } 92 }
134 - } 93 + };
135 </script> 94 </script>
src/components/tree/node.vue
  Show/Hide comments   View file @174836c
@@ -12,8 +12,9 @@ @@ -12,8 +12,9 @@
12 :indeterminate="data.indeterminate" 12 :indeterminate="data.indeterminate"
13 :disabled="data.disabled || data.disableCheckbox" 13 :disabled="data.disabled || data.disableCheckbox"
14 @click.native.prevent="handleCheck"></Checkbox> 14 @click.native.prevent="handleCheck"></Checkbox>
15 - <Render v-if="data.render" :render="data.render"></Render>  
16 - <span v-else :class="titleClasses" v-html="data.title" @click="handleSelect"></span> 15 + <Render v-if="data.render" :render="data.render" :node="data"></Render>
  16 + <Render v-else-if="isParentRender" :render="parentRender" :node="data"></Render>
  17 + <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
17 <Tree-node 18 <Tree-node
18 v-if="data.expand" 19 v-if="data.expand"
19 v-for="(item, i) in data.children" 20 v-for="(item, i) in data.children"
@@ -29,7 +30,7 @@ @@ -29,7 +30,7 @@
29 <script> 30 <script>
30 import Checkbox from '../checkbox/checkbox.vue'; 31 import Checkbox from '../checkbox/checkbox.vue';
31 import Icon from '../icon/icon.vue'; 32 import Icon from '../icon/icon.vue';
32 - import Render from '../base/render'; 33 + import Render from './render';
33 import CollapseTransition from '../base/collapse-transition'; 34 import CollapseTransition from '../base/collapse-transition';
34 import Emitter from '../../mixins/emitter'; 35 import Emitter from '../../mixins/emitter';
35 import { findComponentUpward } from '../../utils/assist'; 36 import { findComponentUpward } from '../../utils/assist';
@@ -61,9 +62,6 @@ @@ -61,9 +62,6 @@
61 prefixCls: prefixCls 62 prefixCls: prefixCls
62 }; 63 };
63 }, 64 },
64 - watch: {  
65 -  
66 - },  
67 computed: { 65 computed: {
68 classes () { 66 classes () {
69 return [ 67 return [
@@ -99,6 +97,18 @@ @@ -99,6 +97,18 @@
99 }, 97 },
100 showLoading () { 98 showLoading () {
101 return 'loading' in this.data && this.data.loading; 99 return 'loading' in this.data && this.data.loading;
  100 + },
  101 + isParentRender () {
  102 + const Tree = findComponentUpward(this, 'Tree');
  103 + return Tree && Tree.render;
  104 + },
  105 + parentRender () {
  106 + const Tree = findComponentUpward(this, 'Tree');
  107 + if (Tree && Tree.render) {
  108 + return Tree.render;
  109 + } else {
  110 + return null;
  111 + }
102 } 112 }
103 }, 113 },
104 methods: { 114 methods: {
src/components/tree/render.js 0 → 100644
  Show/Hide comments   View file @174836c
  1 +export default {
  2 + name: 'RenderCell',
  3 + functional: true,
  4 + props: {
  5 + render: Function,
  6 + node: Object
  7 + },
  8 + render: (h, ctx) => {
  9 + const params = {
  10 + node: ctx.props.node
  11 + };
  12 + return ctx.props.render(h, params);
  13 + }
  14 +};
0 \ No newline at end of file 15 \ No newline at end of file
src/components/tree/tree.vue
  Show/Hide comments   View file @174836c
@@ -42,6 +42,9 @@ @@ -42,6 +42,9 @@
42 }, 42 },
43 loadData: { 43 loadData: {
44 type: Function 44 type: Function
  45 + },
  46 + render: {
  47 + type: Function
45 } 48 }
46 }, 49 },
47 data () { 50 data () {