chenhaodong / mew-iview

Commit fc3e16cf01b61f516c633424cf8454c9b234a14b

Authored by 梁灏
1 parent b63b02dd

update Table selection style, close #3159

Showing 4 changed files with 44 additions and 250 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @fc3e16c
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>  
4 - <br>  
5 - <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>  
6 - <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>  
7 - <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button> 3 + <Table border ref="selection" :columns="columns4" :data="data1"></Table>
  4 + <br><br>
  5 + <Button @click="handleSelectAll(true)">Set all selected</Button>
  6 + <Button @click="handleSelectAll(false)">Cancel all selected</Button>
8 </div> 7 </div>
9 </template> 8 </template>
10 <script> 9 <script>
11 export default { 10 export default {
12 data () { 11 data () {
13 return { 12 return {
14 - columns8: [ 13 + columns4: [
15 { 14 {
16 - "title": "Name",  
17 - "key": "name",  
18 - "fixed": "left",  
19 - "width": 200 15 + type: 'selection',
  16 + width: 60,
  17 + align: 'center'
20 }, 18 },
21 { 19 {
22 - "title": "Show",  
23 - "key": "show",  
24 - "width": 150,  
25 - "sortable": true,  
26 - filters: [  
27 - {  
28 - label: 'Greater than 4000',  
29 - value: 1  
30 - },  
31 - {  
32 - label: 'Less than 4000',  
33 - value: 2  
34 - }  
35 - ],  
36 - filterMultiple: false,  
37 - filterMethod (value, row) {  
38 - if (value === 1) {  
39 - return row.show > 4000;  
40 - } else if (value === 2) {  
41 - return row.show < 4000;  
42 - }  
43 - } 20 + title: 'Name',
  21 + key: 'name'
44 }, 22 },
45 { 23 {
46 - "title": "Weak",  
47 - "key": "weak",  
48 - "width": 150,  
49 - "sortable": true 24 + title: 'Age',
  25 + key: 'age'
50 }, 26 },
51 { 27 {
52 - "title": "Signin",  
53 - "key": "signin",  
54 - "width": 150,  
55 - "sortable": true  
56 - },  
57 - {  
58 - "title": "Click",  
59 - "key": "click",  
60 - "width": 150,  
61 - "sortable": true  
62 - },  
63 - {  
64 - "title": "Active",  
65 - "key": "active",  
66 - "width": 150,  
67 - "sortable": true  
68 - },  
69 - {  
70 - "title": "7, retained",  
71 - "key": "day7",  
72 - "width": 150,  
73 - "sortable": true  
74 - },  
75 - {  
76 - "title": "30, retained",  
77 - "key": "day30",  
78 - "width": 150,  
79 - "sortable": true  
80 - },  
81 - {  
82 - "title": "The next day left",  
83 - "key": "tomorrow",  
84 - "width": 150,  
85 - "sortable": true  
86 - },  
87 - {  
88 - "title": "Day Active",  
89 - "key": "day",  
90 - "width": 150,  
91 - "sortable": true  
92 - },  
93 - {  
94 - "title": "Week Active",  
95 - "key": "week",  
96 - "width": 150,  
97 - "sortable": true  
98 - },  
99 - {  
100 - "title": "Month Active",  
101 - "key": "month",  
102 - "width": 150,  
103 - "sortable": true 28 + title: 'Address',
  29 + key: 'address'
104 } 30 }
105 ], 31 ],
106 - data7: [  
107 - {  
108 - "name": "Name1",  
109 - "fav": 0,  
110 - "show": 7302,  
111 - "weak": 5627,  
112 - "signin": 1563,  
113 - "click": 4254,  
114 - "active": 1438,  
115 - "day7": 274,  
116 - "day30": 285,  
117 - "tomorrow": 1727,  
118 - "day": 558,  
119 - "week": 4440,  
120 - "month": 5610  
121 - },  
122 - {  
123 - "name": "Name2",  
124 - "fav": 0,  
125 - "show": 4720,  
126 - "weak": 4086,  
127 - "signin": 3792,  
128 - "click": 8690,  
129 - "active": 8470,  
130 - "day7": 8172,  
131 - "day30": 5197,  
132 - "tomorrow": 1684,  
133 - "day": 2593,  
134 - "week": 2507,  
135 - "month": 1537  
136 - },  
137 - {  
138 - "name": "Name3",  
139 - "fav": 0,  
140 - "show": 7181,  
141 - "weak": 8007,  
142 - "signin": 8477,  
143 - "click": 1879,  
144 - "active": 16,  
145 - "day7": 2249,  
146 - "day30": 3450,  
147 - "tomorrow": 377,  
148 - "day": 1561,  
149 - "week": 3219,  
150 - "month": 1588  
151 - },  
152 - {  
153 - "name": "Name4",  
154 - "fav": 0,  
155 - "show": 9911,  
156 - "weak": 8976,  
157 - "signin": 8807,  
158 - "click": 8050,  
159 - "active": 7668,  
160 - "day7": 1547,  
161 - "day30": 2357,  
162 - "tomorrow": 7278,  
163 - "day": 5309,  
164 - "week": 1655,  
165 - "month": 9043  
166 - },  
167 - {  
168 - "name": "Name5",  
169 - "fav": 0,  
170 - "show": 934,  
171 - "weak": 1394,  
172 - "signin": 6463,  
173 - "click": 5278,  
174 - "active": 9256,  
175 - "day7": 209,  
176 - "day30": 3563,  
177 - "tomorrow": 8285,  
178 - "day": 1230,  
179 - "week": 4840,  
180 - "month": 9908  
181 - },  
182 - {  
183 - "name": "Name6",  
184 - "fav": 0,  
185 - "show": 6856,  
186 - "weak": 1608,  
187 - "signin": 457,  
188 - "click": 4949,  
189 - "active": 2909,  
190 - "day7": 4525,  
191 - "day30": 6171,  
192 - "tomorrow": 1920,  
193 - "day": 1966,  
194 - "week": 904,  
195 - "month": 6851  
196 - }, 32 + data1: [
197 { 33 {
198 - "name": "Name7",  
199 - "fav": 0,  
200 - "show": 5107,  
201 - "weak": 6407,  
202 - "signin": 4166,  
203 - "click": 7970,  
204 - "active": 1002,  
205 - "day7": 8701,  
206 - "day30": 9040,  
207 - "tomorrow": 7632,  
208 - "day": 4061,  
209 - "week": 4359,  
210 - "month": 3676 34 + name: 'John Brown',
  35 + age: 18,
  36 + address: 'New York No. 1 Lake Park',
  37 + date: '2016-10-03'
211 }, 38 },
212 { 39 {
213 - "name": "Name8",  
214 - "fav": 0,  
215 - "show": 862,  
216 - "weak": 6520,  
217 - "signin": 6696,  
218 - "click": 3209,  
219 - "active": 6801,  
220 - "day7": 6364,  
221 - "day30": 6850,  
222 - "tomorrow": 9408,  
223 - "day": 2481,  
224 - "week": 1479,  
225 - "month": 2346 40 + name: 'Jim Green',
  41 + age: 24,
  42 + address: 'London No. 1 Lake Park',
  43 + date: '2016-10-01'
226 }, 44 },
227 { 45 {
228 - "name": "Name9",  
229 - "fav": 0,  
230 - "show": 567,  
231 - "weak": 5859,  
232 - "signin": 128,  
233 - "click": 6593,  
234 - "active": 1971,  
235 - "day7": 7596,  
236 - "day30": 3546,  
237 - "tomorrow": 6641,  
238 - "day": 1611,  
239 - "week": 5534,  
240 - "month": 3190 46 + name: 'Joe Black',
  47 + age: 30,
  48 + address: 'Sydney No. 1 Lake Park',
  49 + date: '2016-10-02'
241 }, 50 },
242 { 51 {
243 - "name": "Name10",  
244 - "fav": 0,  
245 - "show": 3651,  
246 - "weak": 1819,  
247 - "signin": 4595,  
248 - "click": 7499,  
249 - "active": 7405,  
250 - "day7": 8710,  
251 - "day30": 5518,  
252 - "tomorrow": 428,  
253 - "day": 9768,  
254 - "week": 2864,  
255 - "month": 5811 52 + name: 'Jon Snow',
  53 + age: 26,
  54 + address: 'Ottawa No. 2 Lake Park',
  55 + date: '2016-10-04'
256 } 56 }
257 ] 57 ]
258 } 58 }
259 }, 59 },
260 methods: { 60 methods: {
261 - exportData (type) {  
262 - if (type === 1) {  
263 - this.$refs.table.exportCsv({  
264 - filename: 'The original data'  
265 - });  
266 - } else if (type === 2) {  
267 - this.$refs.table.exportCsv({  
268 - filename: 'Sorting and filtering data',  
269 - original: false  
270 - });  
271 - } else if (type === 3) {  
272 - this.$refs.table.exportCsv({  
273 - filename: 'Custom data',  
274 - columns: this.columns8.filter((col, index) => index < 4),  
275 - data: this.data7.filter((data, index) => index < 4)  
276 - });  
277 - } 61 + handleSelectAll (status) {
  62 + this.$refs.selection.selectAll(status);
278 } 63 }
279 } 64 }
280 } 65 }
src/components/table/cell.vue
  Show/Hide comments   View file @fc3e16c
@@ -55,7 +55,8 @@ @@ -55,7 +55,8 @@
55 { 55 {
56 [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'), 56 [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
57 [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false, 57 [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
58 - [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand' 58 + [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand',
  59 + [`${this.prefixCls}-cell-with-selection`]: this.renderType === 'selection'
59 } 60 }
60 ]; 61 ];
61 }, 62 },
src/components/table/table-head.vue
  Show/Hide comments   View file @fc3e16c
@@ -128,7 +128,8 @@ @@ -128,7 +128,8 @@
128 return [ 128 return [
129 `${this.prefixCls}-cell`, 129 `${this.prefixCls}-cell`,
130 { 130 {
131 - [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right') 131 + [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'),
  132 + [`${this.prefixCls}-cell-with-selection`]: column.type === 'selection'
132 } 133 }
133 ]; 134 ];
134 }, 135 },
src/styles/components/table.less
  Show/Hide comments   View file @fc3e16c
@@ -179,6 +179,13 @@ @@ -179,6 +179,13 @@
179 cursor: pointer; 179 cursor: pointer;
180 user-select: none; 180 user-select: none;
181 } 181 }
  182 +
  183 + // #3159
  184 + &-with-selection{
  185 + .@{checkbox-prefix-cls}-wrapper{
  186 + margin-right: 0;
  187 + }
  188 + }
182 } 189 }
183 &-hidden{ 190 &-hidden{
184 visibility: hidden; 191 visibility: hidden;