other / 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 <template> 1 <template>
203 - <div>  
204 - {{ data1 }}  
205 - <Tree :data="data1"></Tree>  
206 - </div> 2 + <Tree :data="data2" check-directly show-checkbox></Tree>
207 </template> 3 </template>
208 <script> 4 <script>
209 export default { 5 export default {
210 data () { 6 data () {
211 return { 7 return {
212 - data1: [ 8 + data2: [
213 { 9 {
214 title: 'parent 1', 10 title: 'parent 1',
215 expand: true, 11 expand: true,
src/components/tree/node.vue
  Show/Hide comments   View file @467e2cf
@@ -41,6 +41,7 @@ @@ -41,6 +41,7 @@
41 export default { 41 export default {
42 name: 'TreeNode', 42 name: 'TreeNode',
43 mixins: [ Emitter ], 43 mixins: [ Emitter ],
  44 + inject: ['TreeInstance'],
44 components: { Checkbox, Icon, CollapseTransition, Render }, 45 components: { Checkbox, Icon, CollapseTransition, Render },
45 props: { 46 props: {
46 data: { 47 data: {
@@ -156,7 +157,11 @@ @@ -156,7 +157,11 @@
156 }, 157 },
157 handleSelect () { 158 handleSelect () {
158 if (this.data.disabled) return; 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 handleCheck () { 166 handleCheck () {
162 if (this.data.disabled) return; 167 if (this.data.disabled) return;
src/components/tree/tree.vue
  Show/Hide comments   View file @467e2cf
@@ -23,6 +23,9 @@ @@ -23,6 +23,9 @@
23 name: 'Tree', 23 name: 'Tree',
24 mixins: [ Emitter, Locale ], 24 mixins: [ Emitter, Locale ],
25 components: { TreeNode }, 25 components: { TreeNode },
  26 + provide () {
  27 + return { TreeInstance: this };
  28 + },
26 props: { 29 props: {
27 data: { 30 data: {
28 type: Array, 31 type: Array,
@@ -38,9 +41,14 @@ @@ -38,9 +41,14 @@
38 type: Boolean, 41 type: Boolean,
39 default: false 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 emptyText: { 53 emptyText: {
46 type: String 54 type: String
@@ -54,7 +62,8 @@ @@ -54,7 +62,8 @@
54 }, 62 },
55 render: { 63 render: {
56 type: Function 64 type: Function
57 - } 65 + },
  66 +
58 }, 67 },
59 data () { 68 data () {
60 return { 69 return {