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 1 <template>
2 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 7 </div>
9 8 </template>
10 9 <script>
11 10 export default {
12 11 data () {
13 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 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 55 {
56 56 [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
57 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 128 return [
129 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 179 cursor: pointer;
180 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 190 &-hidden{
184 191 visibility: hidden;
... ...