chenhaodong / mew-iview

Commit 467e2cf9a4527da596a5eec09b4df46e464114b1

Authored by 梁灏
1 parent 98221c87

Tree add check-directly prop

Showing 3 changed files with 21 additions and 211 deletions   Show diff stats
Inline Side-by-side
examples/routers/tree.vue
  Show/Hide comments   View file @467e2cf
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   -
97   -<!--<template>-->
98   - <!--<div style="width: 400px;">-->
99   - <!--<Tree :data="data4" :render="renderContent"></Tree>-->
100   - <!--</div>-->
101   -<!--</template>-->
102   -<!--<script>-->
103   - <!--export default {-->
104   - <!--data () {-->
105   - <!--return {-->
106   - <!--data4: [-->
107   - <!--{-->
108   - <!--title: 'parent 1',-->
109   - <!--expand: true,-->
110   - <!--children: [-->
111   - <!--{-->
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   - <!--]-->
124   - <!--},-->
125   - <!--{-->
126   - <!--title: 'parent 1-2',-->
127   - <!--expand: true,-->
128   - <!--children: [-->
129   - <!--{-->
130   - <!--title: 'leaf 1-2-1',-->
131   - <!--expand: true-->
132   - <!--},-->
133   - <!--{-->
134   - <!--title: 'leaf 1-2-1',-->
135   - <!--expand: true-->
136   - <!--}-->
137   - <!--]-->
138   - <!--}-->
139   - <!--]-->
140   - <!--}-->
141   - <!--],-->
142   - <!--buttonProps: {-->
143   - <!--type: 'ghost',-->
144   - <!--size: 'small',-->
145   - <!--}-->
146   - <!--}-->
147   - <!--},-->
148   - <!--methods: {-->
149   - <!--renderContent (h, { data, node, root }) {-->
150   - <!--return h('span', {-->
151   - <!--style: {-->
152   - <!--display: 'inline-block',-->
153   - <!--width: '100%'-->
154   - <!--}-->
155   - <!--}, [-->
156   - <!--h('span', data.title),-->
157   - <!--h('span', {-->
158   - <!--style: {-->
159   - <!--display: 'inline-block',-->
160   - <!--float: 'right',-->
161   - <!--marginRight: '32px'-->
162   - <!--}-->
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(data) }-->
173   - <!--}-->
174   - <!--}),-->
175   - <!--h('Button', {-->
176   - <!--props: Object.assign({}, this.buttonProps, {-->
177   - <!--icon: 'ios-minus-empty'-->
178   - <!--}),-->
179   - <!--on: {-->
180   - <!--click: () => { this.remove(node, data, root) }-->
181   - <!--}-->
182   - <!--})-->
183   - <!--])-->
184   - <!--]);-->
185   - <!--},-->
186   - <!--append (data) {-->
187   - <!--this.$set(data, 'children', [{-->
188   - <!--title: 'appended node',-->
189   - <!--expand: true-->
190   - <!--}]);-->
191   - <!--},-->
192   - <!--remove (node, data, root) {-->
193   - <!--const parentKey = root.find(el => el === node).parent;-->
194   - <!--const parent = root.find(el => el.nodeKey === parentKey).node;-->
195   - <!--const index = parent.children.indexOf(data);-->
196   - <!--parent.children.splice(index, 1);-->
197   - <!--}-->
198   - <!--}-->
199   - <!--}-->
200   -<!--</script>-->
201   -
202 1 <template>
203   - <div>
204   - {{ data1 }}
205   - <Tree :data="data1"></Tree>
206   - </div>
  2 + <Tree :data="data2" check-directly show-checkbox></Tree>
207 3 </template>
208 4 <script>
209 5 export default {
210 6 data () {
211 7 return {
212   - data1: [
  8 + data2: [
213 9 {
214 10 title: 'parent 1',
215 11 expand: true,
... ...
src/components/tree/node.vue
  Show/Hide comments   View file @467e2cf
... ... @@ -41,6 +41,7 @@
41 41 export default {
42 42 name: 'TreeNode',
43 43 mixins: [ Emitter ],
  44 + inject: ['TreeInstance'],
44 45 components: { Checkbox, Icon, CollapseTransition, Render },
45 46 props: {
46 47 data: {
... ... @@ -156,7 +157,11 @@
156 157 },
157 158 handleSelect () {
158 159 if (this.data.disabled) return;
159   - this.dispatch('Tree', 'on-selected', this.data.nodeKey);
  160 + if (this.TreeInstance.showCheckbox && this.TreeInstance.checkDirectly) {
  161 + this.handleCheck();
  162 + } else {
  163 + this.dispatch('Tree', 'on-selected', this.data.nodeKey);
  164 + }
160 165 },
161 166 handleCheck () {
162 167 if (this.data.disabled) return;
... ...
src/components/tree/tree.vue
  Show/Hide comments   View file @467e2cf
... ... @@ -23,6 +23,9 @@
23 23 name: 'Tree',
24 24 mixins: [ Emitter, Locale ],
25 25 components: { TreeNode },
  26 + provide () {
  27 + return { TreeInstance: this };
  28 + },
26 29 props: {
27 30 data: {
28 31 type: Array,
... ... @@ -38,9 +41,14 @@
38 41 type: Boolean,
39 42 default: false
40 43 },
41   - checkStrictly:{
42   - type:Boolean,
43   - default:false
  44 + checkStrictly: {
  45 + type: Boolean,
  46 + default: false
  47 + },
  48 + // 当开启 showCheckbox 时，如果开启 checkDirectly，select 将强制转为 check 事件
  49 + checkDirectly: {
  50 + type: Boolean,
  51 + default: false
44 52 },
45 53 emptyText: {
46 54 type: String
... ... @@ -54,7 +62,8 @@
54 62 },
55 63 render: {
56 64 type: Function
57   - }
  65 + },
  66 +
58 67 },
59 68 data () {
60 69 return {
... ...