From f9f1865ca503097bf93bc2b88214b815c48472b6 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Tue, 10 Jan 2017 16:33:44 +0800
Subject: [PATCH] Table columns add className

---
 src/components/table/mixin.js       |   3 ++-
 src/components/table/table-body.vue |   2 +-
 src/components/table/table-head.vue |   2 +-
 test/routers/cascader.vue           |  32 +++++++++++++++++++++++++++-----
 test/routers/more.vue               |  11 +++++++----
 test/routers/table.vue              | 415 ++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 6 files changed, 72 insertions(+), 393 deletions(-)

diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index 6223dc5..02ed257 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -1,8 +1,9 @@
 export default {
     methods: {
-        alignCls (column) {
+        alignCls (column, type) {
             return [
                 {
+                    [`${column.className}`]: column.className && type === 'body',
                     [`${this.prefixCls}-column-${column.align}`]: column.align,
                     [`${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'))
                 }
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index bb73685..287ba5e 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -11,7 +11,7 @@
                 @mouseleave.stop="handleMouseOut(row._index)"
                 @click.stop="clickCurrentRow(row._index)"
                 @dblclick.stop="dblclickCurrentRow(row._index)">
-                <td v-for="column in columns" :class="alignCls(column)">
+                <td v-for="column in columns" :class="alignCls(column, 'body')">
                     <Cell
                         :fixed="fixed"
                         :prefix-cls="prefixCls"
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 46147fd..1906c66 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -5,7 +5,7 @@
         </colgroup>
         <thead>
             <tr>
-                <th v-for="(index, column) in columns" :class="alignCls(column)">
+                <th v-for="(index, column) in columns" :class="alignCls(column, 'head')">
                     <div :class="cellClasses(column)">
                         <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
                         <template v-else>
diff --git a/test/routers/cascader.vue b/test/routers/cascader.vue
index b0c62e2..9a28966 100644
--- a/test/routers/cascader.vue
+++ b/test/routers/cascader.vue
@@ -1,10 +1,19 @@
 <template>
-    <Cascader :data="data" change-on-select></Cascader>
+    <div v-for="item in list">
+        <Cascader :data="data" change-on-select :render-format="format"></Cascader>
+    </div>
+    <i-button @click="add">add</i-button>
+    <i-button @click="remove">remove</i-button>
 </template>
 <script>
     export default {
         data () {
             return {
+                list: [
+                    {
+                        a: 1
+                    }
+                ],
                 data: [{
                     value: 'beijing',
                     label: '北京',
@@ -32,7 +41,7 @@
                             children: [
                                 {
                                     value: 'fuzimiao',
-                                    label: '夫子庙',
+                                    label: '夫子庙'
                                 }
                             ]
                         },
@@ -42,17 +51,30 @@
                             children: [
                                 {
                                     value: 'zhuozhengyuan',
-                                    label: '拙政园',
+                                    label: '拙政园'
                                 },
                                 {
                                     value: 'shizilin',
-                                    label: '狮子林',
+                                    label: '狮子林'
                                 }
                             ]
                         }
-                    ],
+                    ]
                 }]
             }
+        },
+        methods: {
+            add () {
+                this.list.push({
+                    a: 2
+                })
+            },
+            remove () {
+                this.list.splice(0, 1);
+            },
+            format (labels) {
+                return labels.join(' - ');
+            }
         }
     }
 </script>
diff --git a/test/routers/more.vue b/test/routers/more.vue
index 1d9b97d..fa1445a 100644
--- a/test/routers/more.vue
+++ b/test/routers/more.vue
@@ -4,10 +4,13 @@
     }
 </style>
 <template>
-    <row>
-        <i-col span="0">123</i-col>
-        <i-col span="24">24</i-col>
-    </row>
+    <Tabs active-key="key1">
+        <Tab-pane label="标签一" key="key1">
+            <Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
+        </Tab-pane>
+        <Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane>
+        <Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane>
+    </Tabs>
 </template>
 <script>
     export default {
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 22cfd88..45666a7 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -1,204 +1,46 @@
+<style>
+    /*.ivu-table .demo-table-info-row td{*/
+        /*background-color: #2db7f5;*/
+        /*color: #fff;*/
+    /*}*/
+    /*.ivu-table .demo-table-error-row td{*/
+        /*background-color: #ff6600;*/
+        /*color: #fff;*/
+    /*}*/
+    .ivu-table .table-age-col{
+        background: #ff6600;
+    }
+    .ivu-table .table-name-col{
+        background: #2db7f5;
+    }
+    .ivu-table .table-address-col{
+        background: #187;
+    }
+</style>
 <template>
-    <i-table border :columns="columns1" :data="data1"></i-table>
-    <!--<i-table border height="200" :columns="columns1" :data="data2"></i-table>-->
-    <!--<i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>-->
-    <!--<i-button @click="changeFilter">改变filter</i-button>-->
-    <!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>-->
-    <!--<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis-->
-    <!--<i-table-->
-      <!--border-->
-      <!--:columns="columns6"-->
-      <!--width="500"-->
-      <!--:data="[]"-->
-      <!--:highlight-row="true"-->
-      <!--@on-current-change="onCurrentChange"-->
-      <!--@on-dblclick="onDblclick">-->
-    <!--</i-table>-->
-
-    <!--<br/>-->
-
-    <!--<i-table-->
-      <!--border-->
-      <!--:columns="columns7"-->
-      <!--:data="[]"-->
-      <!--no-data-text="No Data"-->
-      <!--:highlight-row="true"-->
-      <!--@on-current-change="onCurrentChange"-->
-      <!--@on-dblclick="onDblclick">-->
-    <!--</i-table>-->
-
-    <!--<br/>-->
-
-    <!--<i-table-->
-      <!--border-->
-      <!--:columns="columns7"-->
-      <!--:data="[]"-->
-      <!--size="small"-->
-      <!--:highlight-row="true"-->
-      <!--@on-current-change="onCurrentChange"-->
-      <!--@on-dblclick="onDblclick">-->
-    <!--</i-table>-->
-
-    <!--<br/>-->
-
-    <!--<i-table-->
-      <!--border-->
-      <!--:columns="columns7"-->
-      <!--:data="[]"-->
-      <!--size="large"-->
-      <!--:highlight-row="true"-->
-      <!--@on-current-change="onCurrentChange"-->
-      <!--@on-dblclick="onDblclick">-->
-    <!--</i-table>-->
-
-    <!--<br/>-->
-
-    <!--<i-table-->
-      <!--border-->
-      <!--:columns="columns7"-->
-      <!--:data="data5"-->
-      <!--:highlight-row="true"-->
-      <!--@on-current-change="onCurrentChange"-->
-      <!--@on-dblclick="onDblclick">-->
-    <!--</i-table>-->
-
-    <!--<br/>-->
-
-    <!--<i-table-->
-      <!--border-->
-      <!--:columns="columns6"-->
-      <!--width="500"-->
-      <!--:data="data5"-->
-      <!--:highlight-row="true"-->
-      <!--@on-current-change="onCurrentChange"-->
-      <!--@on-dblclick="onDblclick">-->
-    <!--</i-table>-->
+    <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
 </template>
 <script>
     export default {
         data () {
             return {
-                columns2: [
+                columns1: [
                     {
                         title: '姓名',
                         key: 'name',
-                        width: 100,
-                        fixed: 'left'
+                        fixed: 'right',
+                        className: 'table-name-col'
                     },
                     {
                         title: '年龄',
                         key: 'age',
-                        width: 100
-                    },
-                    {
-                        title: '省份',
-                        key: 'province',
-                        width: 100
-                    },
-                    {
-                        title: '市区',
-                        key: 'city',
-                        width: 100
-                    },
-                    {
-                        title: '地址',
-                        key: 'address',
                         fixed: 'right',
-                        width: 200
-                    },
-                    {
-                        title: '邮编',
-                        key: 'zip',
-                        width: 100
-                    },
-                    {
-                        title: '操作',
-                        key: 'action',
-//                        fixed: 'right',
-                        width: 120,
-                        render () {
-                            return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`;
-                        }
-                    }
-                ],
-                data4: [
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居',
-                        province: '北京市',
-                        city: '朝阳区',
-                        zip: 100000
-                    },
-                    {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗',
-                        province: '北京市',
-                        city: '海淀区',
-                        zip: 100000
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道',
-                        province: '上海市',
-                        city: '浦东新区',
-                        zip: 100000
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道',
-                        province: '广东',
-                        city: '南山区',
-                        zip: 100000
-                    },
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居',
-                        province: '北京市',
-                        city: '朝阳区',
-                        zip: 100000
-                    },
-                    {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗',
-                        province: '北京市',
-                        city: '海淀区',
-                        zip: 100000
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道',
-                        province: '上海市',
-                        city: '浦东新区',
-                        zip: 100000
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道',
-                        province: '广东',
-                        city: '南山区',
-                        zip: 100000
-                    }
-                ],
-                columns1: [
-                    {
-                        title: '姓名',
-                        key: 'name'
-                    },
-                    {
-                        title: '年龄',
-                        key: 'age'
+                        className: 'table-age-col'
                     },
                     {
                         title: '地址',
-                        key: 'address'
+                        key: 'address',
+                        className: 'table-address-col'
                     }
                 ],
                 data1: [
@@ -222,206 +64,17 @@
                         age: 26,
                         address: '深圳市南山区深南大道'
                     }
-                ],
-                data2: [
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
-                    },
-                    {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗'
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道'
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道'
-                    },
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
-                    },
-                    {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗'
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道'
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道'
-                    }
-                ],
-                columns6: [
-                    {
-                        type: 'selection',
-                        width: 60,
-                        align: 'center',
-                        width: 100
-                    },
-                    {
-                        title: '日期',
-                        key: 'date',
-                        fixed: 'left',
-                        width: 100
-                    },
-                    {
-                        title: '姓名',
-                        key: 'name',
-                        width: 100
-                    },
-                    {
-                        title: '年龄',
-                        key: 'age',
-                        width: 100,
-                        filters: [
-                            {
-                                label: '大于25岁',
-                                value: 1
-                            },
-                            {
-                                label: '小于25岁',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.age > 25;
-                            } else if (value === 2) {
-                                return row.age < 25;
-                            }
-                        }
-                    },
-                    {
-                        title: '地址',
-                        key: 'address',
-                        width: 100,
-                        filters: [
-                            {
-                                label: '北京',
-                                value: '北京'
-                            },
-                            {
-                                label: '上海',
-                                value: '上海'
-                            },
-                            {
-                                label: '深圳',
-                                value: '深圳'
-                            }
-                        ],
-                        filterMethod (value, row) {
-                            return row.address.indexOf(value) > -1;
-                        }
-                    },
-                    {
-                      title: '长文本',
-                      key: 'longText',
-                      width: 100,
-                      ellipsis: false
-                    }
-                ],
-                columns7: [
-                    {
-                        type: 'selection',
-                        width: 60,
-                        align: 'center'
-                    },
-                    {
-                        title: '日期',
-                        key: 'date'
-                    },
-                    {
-                        title: '姓名',
-                        key: 'name'
-                    },
-                    {
-                        title: '地址',
-                        key: 'address',
-                        filters: [
-                            {
-                                label: '北京',
-                                value: '北京'
-                            },
-                            {
-                                label: '上海',
-                                value: '上海'
-                            },
-                            {
-                                label: '深圳',
-                                value: '深圳'
-                            }
-                        ],
-                        filterMethod (value, row) {
-                            return row.address.indexOf(value) > -1;
-                        }
-                    },
-                    {
-                      title: '长文本',
-                      key: 'longText',
-                      ellipsis: false
-                    }
-                ],
-                data5: [
-                   {
-                       name: '王小明',
-                       age: 18,
-                       address: '北京市朝阳区芍药居',
-                       date: '2016-10-03',
-                       longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
-                   },
-                   {
-                       name: '张小刚',
-                       age: 25,
-                       address: '北京市海淀区西二旗',
-                       date: '2016-10-01',
-                       longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
-                   },
-                   {
-                       name: '李小红',
-                       age: 30,
-                       address: '上海市浦东新区世纪大道',
-                       date: '2016-10-02',
-                       longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
-                   }
-                ],
-                currentRow: null
+                ]
             }
         },
         methods: {
-            changeFilter () {
-                this.columns6[2].filters = [
-                    {
-                        label: '小于25岁',
-                        value: 2
-                    }
-                ]
-            },
-            switchCellEllipsis (status) {
-                this.columns6[5].ellipsis = status
-            },
-            onClick (data) {
-                window.alert('Click ' + data.name)
-            },
-            onCurrentChange (data) {
-                this.currentRow = data
-            },
-            onDblclick (data) {
-                window.alert('Double Click ' + data.name)
+            rowClassName (row, index) {
+                if (index === 1) {
+                    return 'demo-table-info-row';
+                } else if (index === 3) {
+                    return 'demo-table-error-row';
+                }
+                return '';
             }
         }
     }
--
libgit2 0.21.4