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 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 7 </template>
92 8 <script>
93 9 export default {
94 10 data () {
95 11 return {
96   - data3: [
  12 + baseData: [
97 13 {
98   - title: 'parent 1',
99 14 expand: true,
100   - selected: true,
  15 + title: 'parent 1',
101 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 25 expand: true,
  26 + checked: true,
119 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 94 </script>
... ...
src/components/tree/node.vue
  Show/Hide comments   View file @174836c
... ... @@ -12,8 +12,9 @@
12 12 :indeterminate="data.indeterminate"
13 13 :disabled="data.disabled || data.disableCheckbox"
14 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 18 <Tree-node
18 19 v-if="data.expand"
19 20 v-for="(item, i) in data.children"
... ... @@ -29,7 +30,7 @@
29 30 <script>
30 31 import Checkbox from '../checkbox/checkbox.vue';
31 32 import Icon from '../icon/icon.vue';
32   - import Render from '../base/render';
  33 + import Render from './render';
33 34 import CollapseTransition from '../base/collapse-transition';
34 35 import Emitter from '../../mixins/emitter';
35 36 import { findComponentUpward } from '../../utils/assist';
... ... @@ -61,9 +62,6 @@
61 62 prefixCls: prefixCls
62 63 };
63 64 },
64   - watch: {
65   -
66   - },
67 65 computed: {
68 66 classes () {
69 67 return [
... ... @@ -99,6 +97,18 @@
99 97 },
100 98 showLoading () {
101 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 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 15 \ No newline at end of file
... ...
src/components/tree/tree.vue
  Show/Hide comments   View file @174836c
... ... @@ -42,6 +42,9 @@
42 42 },
43 43 loadData: {
44 44 type: Function
  45 + },
  46 + render: {
  47 + type: Function
45 48 }
46 49 },
47 50 data () {
... ...