other / mew-iview

Commit f9f1865ca503097bf93bc2b88214b815c48472b6

Authored by 梁灏
1 parent 1b7aefea

Table columns add className 

Table columns add className
Showing 6 changed files with 72 additions and 393 deletions   Show diff stats
Inline Side-by-side
src/components/table/mixin.js
  Show/Hide comments   View file @f9f1865
1 1 export default {
2 2 methods: {
3   - alignCls (column) {
  3 + alignCls (column, type) {
4 4 return [
5 5 {
  6 + [`${column.className}`]: column.className && type === 'body',
6 7 [`${this.prefixCls}-column-${column.align}`]: column.align,
7 8 [`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
8 9 }
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @f9f1865
... ... @@ -11,7 +11,7 @@
11 11 @mouseleave.stop="handleMouseOut(row._index)"
12 12 @click.stop="clickCurrentRow(row._index)"
13 13 @dblclick.stop="dblclickCurrentRow(row._index)">
14   - <td v-for="column in columns" :class="alignCls(column)">
  14 + <td v-for="column in columns" :class="alignCls(column, 'body')">
15 15 <Cell
16 16 :fixed="fixed"
17 17 :prefix-cls="prefixCls"
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @f9f1865
... ... @@ -5,7 +5,7 @@
5 5 </colgroup>
6 6 <thead>
7 7 <tr>
8   - <th v-for="(index, column) in columns" :class="alignCls(column)">
  8 + <th v-for="(index, column) in columns" :class="alignCls(column, 'head')">
9 9 <div :class="cellClasses(column)">
10 10 <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
11 11 <template v-else>
... ...
test/routers/cascader.vue
  Show/Hide comments   View file @f9f1865
1 1 <template>
2   - <Cascader :data="data" change-on-select></Cascader>
  2 + <div v-for="item in list">
  3 + <Cascader :data="data" change-on-select :render-format="format"></Cascader>
  4 + </div>
  5 + <i-button @click="add">add</i-button>
  6 + <i-button @click="remove">remove</i-button>
3 7 </template>
4 8 <script>
5 9 export default {
6 10 data () {
7 11 return {
  12 + list: [
  13 + {
  14 + a: 1
  15 + }
  16 + ],
8 17 data: [{
9 18 value: 'beijing',
10 19 label: '北京',
... ... @@ -32,7 +41,7 @@
32 41 children: [
33 42 {
34 43 value: 'fuzimiao',
35   - label: '夫子庙',
  44 + label: '夫子庙'
36 45 }
37 46 ]
38 47 },
... ... @@ -42,17 +51,30 @@
42 51 children: [
43 52 {
44 53 value: 'zhuozhengyuan',
45   - label: '拙政园',
  54 + label: '拙政园'
46 55 },
47 56 {
48 57 value: 'shizilin',
49   - label: '狮子林',
  58 + label: '狮子林'
50 59 }
51 60 ]
52 61 }
53   - ],
  62 + ]
54 63 }]
55 64 }
  65 + },
  66 + methods: {
  67 + add () {
  68 + this.list.push({
  69 + a: 2
  70 + })
  71 + },
  72 + remove () {
  73 + this.list.splice(0, 1);
  74 + },
  75 + format (labels) {
  76 + return labels.join(' - ');
  77 + }
56 78 }
57 79 }
58 80 </script>
... ...
test/routers/more.vue
  Show/Hide comments   View file @f9f1865
... ... @@ -4,10 +4,13 @@
4 4 }
5 5 </style>
6 6 <template>
7   - <row>
8   - <i-col span="0">123</i-col>
9   - <i-col span="24">24</i-col>
10   - </row>
  7 + <Tabs active-key="key1">
  8 + <Tab-pane label="标签一" key="key1">
  9 + <Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
  10 + </Tab-pane>
  11 + <Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane>
  12 + <Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane>
  13 + </Tabs>
11 14 </template>
12 15 <script>
13 16 export default {
... ...
test/routers/table.vue
  Show/Hide comments   View file @f9f1865
  1 +<style>
  2 + /*.ivu-table .demo-table-info-row td{*/
  3 + /*background-color: #2db7f5;*/
  4 + /*color: #fff;*/
  5 + /*}*/
  6 + /*.ivu-table .demo-table-error-row td{*/
  7 + /*background-color: #ff6600;*/
  8 + /*color: #fff;*/
  9 + /*}*/
  10 + .ivu-table .table-age-col{
  11 + background: #ff6600;
  12 + }
  13 + .ivu-table .table-name-col{
  14 + background: #2db7f5;
  15 + }
  16 + .ivu-table .table-address-col{
  17 + background: #187;
  18 + }
  19 +</style>
1 20 <template>
2   - <i-table border :columns="columns1" :data="data1"></i-table>
3   - <!--<i-table border height="200" :columns="columns1" :data="data2"></i-table>-->
4   - <!--<i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>-->
5   - <!--<i-button @click="changeFilter">改变filter</i-button>-->
6   - <!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>-->
7   - <!--<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis-->
8   - <!--<i-table-->
9   - <!--border-->
10   - <!--:columns="columns6"-->
11   - <!--width="500"-->
12   - <!--:data="[]"-->
13   - <!--:highlight-row="true"-->
14   - <!--@on-current-change="onCurrentChange"-->
15   - <!--@on-dblclick="onDblclick">-->
16   - <!--</i-table>-->
17   -
18   - <!--<br/>-->
19   -
20   - <!--<i-table-->
21   - <!--border-->
22   - <!--:columns="columns7"-->
23   - <!--:data="[]"-->
24   - <!--no-data-text="No Data"-->
25   - <!--:highlight-row="true"-->
26   - <!--@on-current-change="onCurrentChange"-->
27   - <!--@on-dblclick="onDblclick">-->
28   - <!--</i-table>-->
29   -
30   - <!--<br/>-->
31   -
32   - <!--<i-table-->
33   - <!--border-->
34   - <!--:columns="columns7"-->
35   - <!--:data="[]"-->
36   - <!--size="small"-->
37   - <!--:highlight-row="true"-->
38   - <!--@on-current-change="onCurrentChange"-->
39   - <!--@on-dblclick="onDblclick">-->
40   - <!--</i-table>-->
41   -
42   - <!--<br/>-->
43   -
44   - <!--<i-table-->
45   - <!--border-->
46   - <!--:columns="columns7"-->
47   - <!--:data="[]"-->
48   - <!--size="large"-->
49   - <!--:highlight-row="true"-->
50   - <!--@on-current-change="onCurrentChange"-->
51   - <!--@on-dblclick="onDblclick">-->
52   - <!--</i-table>-->
53   -
54   - <!--<br/>-->
55   -
56   - <!--<i-table-->
57   - <!--border-->
58   - <!--:columns="columns7"-->
59   - <!--:data="data5"-->
60   - <!--:highlight-row="true"-->
61   - <!--@on-current-change="onCurrentChange"-->
62   - <!--@on-dblclick="onDblclick">-->
63   - <!--</i-table>-->
64   -
65   - <!--<br/>-->
66   -
67   - <!--<i-table-->
68   - <!--border-->
69   - <!--:columns="columns6"-->
70   - <!--width="500"-->
71   - <!--:data="data5"-->
72   - <!--:highlight-row="true"-->
73   - <!--@on-current-change="onCurrentChange"-->
74   - <!--@on-dblclick="onDblclick">-->
75   - <!--</i-table>-->
  21 + <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
76 22 </template>
77 23 <script>
78 24 export default {
79 25 data () {
80 26 return {
81   - columns2: [
  27 + columns1: [
82 28 {
83 29 title: '姓名',
84 30 key: 'name',
85   - width: 100,
86   - fixed: 'left'
  31 + fixed: 'right',
  32 + className: 'table-name-col'
87 33 },
88 34 {
89 35 title: '年龄',
90 36 key: 'age',
91   - width: 100
92   - },
93   - {
94   - title: '省份',
95   - key: 'province',
96   - width: 100
97   - },
98   - {
99   - title: '市区',
100   - key: 'city',
101   - width: 100
102   - },
103   - {
104   - title: '地址',
105   - key: 'address',
106 37 fixed: 'right',
107   - width: 200
108   - },
109   - {
110   - title: '邮编',
111   - key: 'zip',
112   - width: 100
113   - },
114   - {
115   - title: '操作',
116   - key: 'action',
117   -// fixed: 'right',
118   - width: 120,
119   - render () {
120   - return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`;
121   - }
122   - }
123   - ],
124   - data4: [
125   - {
126   - name: '王小明',
127   - age: 18,
128   - address: '北京市朝阳区芍药居',
129   - province: '北京市',
130   - city: '朝阳区',
131   - zip: 100000
132   - },
133   - {
134   - name: '张小刚',
135   - age: 25,
136   - address: '北京市海淀区西二旗',
137   - province: '北京市',
138   - city: '海淀区',
139   - zip: 100000
140   - },
141   - {
142   - name: '李小红',
143   - age: 30,
144   - address: '上海市浦东新区世纪大道',
145   - province: '上海市',
146   - city: '浦东新区',
147   - zip: 100000
148   - },
149   - {
150   - name: '周小伟',
151   - age: 26,
152   - address: '深圳市南山区深南大道',
153   - province: '广东',
154   - city: '南山区',
155   - zip: 100000
156   - },
157   - {
158   - name: '王小明',
159   - age: 18,
160   - address: '北京市朝阳区芍药居',
161   - province: '北京市',
162   - city: '朝阳区',
163   - zip: 100000
164   - },
165   - {
166   - name: '张小刚',
167   - age: 25,
168   - address: '北京市海淀区西二旗',
169   - province: '北京市',
170   - city: '海淀区',
171   - zip: 100000
172   - },
173   - {
174   - name: '李小红',
175   - age: 30,
176   - address: '上海市浦东新区世纪大道',
177   - province: '上海市',
178   - city: '浦东新区',
179   - zip: 100000
180   - },
181   - {
182   - name: '周小伟',
183   - age: 26,
184   - address: '深圳市南山区深南大道',
185   - province: '广东',
186   - city: '南山区',
187   - zip: 100000
188   - }
189   - ],
190   - columns1: [
191   - {
192   - title: '姓名',
193   - key: 'name'
194   - },
195   - {
196   - title: '年龄',
197   - key: 'age'
  38 + className: 'table-age-col'
198 39 },
199 40 {
200 41 title: '地址',
201   - key: 'address'
  42 + key: 'address',
  43 + className: 'table-address-col'
202 44 }
203 45 ],
204 46 data1: [
... ... @@ -222,206 +64,17 @@
222 64 age: 26,
223 65 address: '深圳市南山区深南大道'
224 66 }
225   - ],
226   - data2: [
227   - {
228   - name: '王小明',
229   - age: 18,
230   - address: '北京市朝阳区芍药居'
231   - },
232   - {
233   - name: '张小刚',
234   - age: 25,
235   - address: '北京市海淀区西二旗'
236   - },
237   - {
238   - name: '李小红',
239   - age: 30,
240   - address: '上海市浦东新区世纪大道'
241   - },
242   - {
243   - name: '周小伟',
244   - age: 26,
245   - address: '深圳市南山区深南大道'
246   - },
247   - {
248   - name: '王小明',
249   - age: 18,
250   - address: '北京市朝阳区芍药居'
251   - },
252   - {
253   - name: '张小刚',
254   - age: 25,
255   - address: '北京市海淀区西二旗'
256   - },
257   - {
258   - name: '李小红',
259   - age: 30,
260   - address: '上海市浦东新区世纪大道'
261   - },
262   - {
263   - name: '周小伟',
264   - age: 26,
265   - address: '深圳市南山区深南大道'
266   - }
267   - ],
268   - columns6: [
269   - {
270   - type: 'selection',
271   - width: 60,
272   - align: 'center',
273   - width: 100
274   - },
275   - {
276   - title: '日期',
277   - key: 'date',
278   - fixed: 'left',
279   - width: 100
280   - },
281   - {
282   - title: '姓名',
283   - key: 'name',
284   - width: 100
285   - },
286   - {
287   - title: '年龄',
288   - key: 'age',
289   - width: 100,
290   - filters: [
291   - {
292   - label: '大于25岁',
293   - value: 1
294   - },
295   - {
296   - label: '小于25岁',
297   - value: 2
298   - }
299   - ],
300   - filterMultiple: false,
301   - filterMethod (value, row) {
302   - if (value === 1) {
303   - return row.age > 25;
304   - } else if (value === 2) {
305   - return row.age < 25;
306   - }
307   - }
308   - },
309   - {
310   - title: '地址',
311   - key: 'address',
312   - width: 100,
313   - filters: [
314   - {
315   - label: '北京',
316   - value: '北京'
317   - },
318   - {
319   - label: '上海',
320   - value: '上海'
321   - },
322   - {
323   - label: '深圳',
324   - value: '深圳'
325   - }
326   - ],
327   - filterMethod (value, row) {
328   - return row.address.indexOf(value) > -1;
329   - }
330   - },
331   - {
332   - title: '长文本',
333   - key: 'longText',
334   - width: 100,
335   - ellipsis: false
336   - }
337   - ],
338   - columns7: [
339   - {
340   - type: 'selection',
341   - width: 60,
342   - align: 'center'
343   - },
344   - {
345   - title: '日期',
346   - key: 'date'
347   - },
348   - {
349   - title: '姓名',
350   - key: 'name'
351   - },
352   - {
353   - title: '地址',
354   - key: 'address',
355   - filters: [
356   - {
357   - label: '北京',
358   - value: '北京'
359   - },
360   - {
361   - label: '上海',
362   - value: '上海'
363   - },
364   - {
365   - label: '深圳',
366   - value: '深圳'
367   - }
368   - ],
369   - filterMethod (value, row) {
370   - return row.address.indexOf(value) > -1;
371   - }
372   - },
373   - {
374   - title: '长文本',
375   - key: 'longText',
376   - ellipsis: false
377   - }
378   - ],
379   - data5: [
380   - {
381   - name: '王小明',
382   - age: 18,
383   - address: '北京市朝阳区芍药居',
384   - date: '2016-10-03',
385   - longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
386   - },
387   - {
388   - name: '张小刚',
389   - age: 25,
390   - address: '北京市海淀区西二旗',
391   - date: '2016-10-01',
392   - longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
393   - },
394   - {
395   - name: '李小红',
396   - age: 30,
397   - address: '上海市浦东新区世纪大道',
398   - date: '2016-10-02',
399   - longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
400   - }
401   - ],
402   - currentRow: null
  67 + ]
403 68 }
404 69 },
405 70 methods: {
406   - changeFilter () {
407   - this.columns6[2].filters = [
408   - {
409   - label: '小于25岁',
410   - value: 2
411   - }
412   - ]
413   - },
414   - switchCellEllipsis (status) {
415   - this.columns6[5].ellipsis = status
416   - },
417   - onClick (data) {
418   - window.alert('Click ' + data.name)
419   - },
420   - onCurrentChange (data) {
421   - this.currentRow = data
422   - },
423   - onDblclick (data) {
424   - window.alert('Double Click ' + data.name)
  71 + rowClassName (row, index) {
  72 + if (index === 1) {
  73 + return 'demo-table-info-row';
  74 + } else if (index === 3) {
  75 + return 'demo-table-error-row';
  76 + }
  77 + return '';
425 78 }
426 79 }
427 80 }
... ...