other / mew-iview

Commit c211f71778df133e4214eeccd5807611d9b87bc6

Authored by 梁灏
1 parent f9f1865c

Table data support to set cell className 

Table data support to set cell className
Showing 3 changed files with 39 additions and 10 deletions   Show diff stats
Inline Side-by-side
src/components/table/mixin.js
  Show/Hide comments   View file @c211f71
1 1 export default {
2 2 methods: {
3   - alignCls (column, type) {
  3 + alignCls (column, type, row = {}) {
  4 + let cellClassName = '';
  5 + if (row.cellClassName && column.key && row.cellClassName[column.key]) {
  6 + cellClassName = row.cellClassName[column.key];
  7 + }
4 8 return [
5 9 {
6   - [`${column.className}`]: column.className && type === 'body',
  10 + [`${cellClassName}`]: cellClassName, // cell className
  11 + [`${column.className}`]: column.className && type === 'body', // column className
7 12 [`${this.prefixCls}-column-${column.align}`]: column.align,
8 13 [`${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'))
9 14 }
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @c211f71
... ... @@ -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, 'body')">
  14 + <td v-for="column in columns" :class="alignCls(column, 'body', row)">
15 15 <Cell
16 16 :fixed="fixed"
17 17 :prefix-cls="prefixCls"
... ...
test/routers/table.vue
  Show/Hide comments   View file @c211f71
... ... @@ -16,6 +16,18 @@
16 16 .ivu-table .table-address-col{
17 17 background: #187;
18 18 }
  19 + .ivu-table .class-cell-age{
  20 + background: #187;
  21 + color: #fff;
  22 + }
  23 + .ivu-table .class-cell-address{
  24 + background: #f60;
  25 + color: #fff;
  26 + }
  27 + .ivu-table .class-cell-name{
  28 + background: #2db7f5;
  29 + color: #fff;
  30 + }
19 31 </style>
20 32 <template>
21 33 <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
... ... @@ -26,28 +38,37 @@
26 38 return {
27 39 columns1: [
28 40 {
  41 + type: 'selection',
  42 + width: 60,
  43 + align: 'center'
  44 + },
  45 + {
29 46 title: '姓名',
30 47 key: 'name',
31   - fixed: 'right',
32   - className: 'table-name-col'
  48 +// fixed: 'right',
  49 +// className: 'table-name-col'
33 50 },
34 51 {
35 52 title: '年龄',
36 53 key: 'age',
37   - fixed: 'right',
38   - className: 'table-age-col'
  54 +// fixed: 'right',
  55 +// className: 'table-age-col'
39 56 },
40 57 {
41 58 title: '地址',
42 59 key: 'address',
43   - className: 'table-address-col'
  60 +// className: 'table-address-col'
44 61 }
45 62 ],
46 63 data1: [
47 64 {
48 65 name: '王小明',
49 66 age: 18,
50   - address: '北京市朝阳区芍药居'
  67 + address: '北京市朝阳区芍药居',
  68 + cellClassName: {
  69 + age: 'class-cell-age',
  70 + address: 'class-cell-address'
  71 + }
51 72 },
52 73 {
53 74 name: '张小刚',
... ... @@ -57,7 +78,10 @@
57 78 {
58 79 name: '李小红',
59 80 age: 30,
60   - address: '上海市浦东新区世纪大道'
  81 + address: '上海市浦东新区世纪大道',
  82 + cellClassName: {
  83 + name: 'class-cell-name'
  84 + }
61 85 },
62 86 {
63 87 name: '周小伟',
... ...