From 8a392d25fc5e603db876fd1fc8afbf48ab6b7409 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Sun, 3 Sep 2017 11:40:48 +0800
Subject: [PATCH] Table expand support set column header, and close #1299

---
 examples/components/test.vue        |  51 ++++++---
 examples/routers/table.vue          | 172 ++++++++++------------------
 src/components/table/table-head.vue |   5 +-
 3 files changed, 97 insertions(+), 131 deletions(-)

diff --git a/examples/components/test.vue b/examples/components/test.vue
index 6451c2ac..e3a42bab 100644
--- a/examples/components/test.vue
+++ b/examples/components/test.vue
@@ -1,20 +1,39 @@
 <template>
-    <Dropdown transfer>
-        <a href="javascript:void(0)">
-            下拉菜单
-            <Icon type="arrow-down-b"></Icon>
-        </a>
-        <Dropdown-menu slot="list">
-            <Dropdown-item>驴打滚</Dropdown-item>
-            <Dropdown-item>炸酱面</Dropdown-item>
-            <Dropdown-item disabled>豆汁儿</Dropdown-item>
-            <Dropdown-item>冰糖葫芦</Dropdown-item>
-            <Dropdown-item divided>北京烤鸭</Dropdown-item>
-        </Dropdown-menu>
-    </Dropdown>
+    <div>
+        <Row class="expand-row">
+            <Col span="8">
+            <span class="expand-key">职业：</span>
+            <span class="expand-value">{{ row.job }}</span>
+            </Col>
+            <Col span="8">
+            <span class="expand-key">兴趣：</span>
+            <span class="expand-value">{{ row.interest }}</span>
+            </Col>
+            <Col span="8">
+            <span class="expand-key">生日：</span>
+            <span class="expand-value">{{ row.birthday }}</span>
+            </Col>
+        </Row>
+        <Row>
+            <Col span="8">
+            <span class="expand-key">最喜欢的书：</span>
+            <span class="expand-value">《{{ row.book }}》</span>
+            </Col>
+            <Col span="8">
+            <span class="expand-key">最喜欢的电影：</span>
+            <span class="expand-value">{{ row.movie }}</span>
+            </Col>
+            <Col span="8">
+            <span class="expand-key">最喜欢的音乐：</span>
+            <span class="expand-value">{{ row.music }}</span>
+            </Col>
+        </Row>
+    </div>
 </template>
 <script>
     export default {
-
-    }
-</script>
+        props: {
+            row: Object
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 376858f1..c48347b4 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,144 +1,88 @@
 <template>
-    <div>
-        <Table
-                width="500"
-                height="200"
-                border
-                highlight-row
-                :columns="columns2"
-                @on-selection-change="change2"
-                :data="data3"></Table>
-        <Button @click="addData">添加数据</Button>
-    </div>
+    <Table :columns="columns10" :data="data9"></Table>
 </template>
 <script>
-    import test from '../components/test.vue';
+    import expandRow from '../components/tableExpand.vue';
     export default {
+        components: { expandRow },
         data () {
             return {
-                columns2: [
-//                    {
-//                        type: 'selection',
-//                        width: 60,
-//                        align: 'center'
-//                    },
+                columns10: [
                     {
-                        title: '姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名',
-                        key: 'name',
-                        width: 200,
-//                        sortable: true,
-//                        fixed: 'right',
+                        type: 'expand',
+                        width: 100,
+                        title: '展',
+                        renderHeader (h) {
+                            return h('i', '展开')
+                        },
                         render: (h, params) => {
-                            return h('div', [
-                                h('Button', {
-                                    props: {
-                                        type: 'primary',
-                                        size: 'small'
-                                    },
-                                    on: {
-                                        click: this.edit
-                                    },
-                                }, '修改')
-                            ]);
+                            return h(expandRow, {
+                                props: {
+                                    row: params.row
+                                }
+                            })
                         }
                     },
                     {
-                        title: '年龄',
-                        key: 'age',
-                        sortable: true,
-//                        sortType: 'asc',
-                        width: 200
+                        title: '姓名',
+                        key: 'name'
                     },
                     {
-                        title: '省份',
-                        key: 'province',
-                        sortable: true,
-//                        fixed: 'right',
-                        width: 200
+                        title: '年龄',
+                        key: 'age'
                     },
-//                    {
-//                        title: '市区',
-//                        key: 'city',
-//                        width: 100
-//                    },
-//                    {
-//                        title: '地址',
-//                        key: 'address',
-//                        width: 200
-//                    },
-//                    {
-//                        title: '邮编',
-//                        key: 'zip',
-//                        width: 100
-//                    },
-//                    {
-//                        title: '操作',
-//                        key: 'action',
-//                        fixed: 'right',
-//                        width: 120,
-//                        render: (h, params) => {
-//                            return h(test);
-//                        }
-//                    }
+                    {
+                        title: '地址',
+                        key: 'address'
+                    }
                 ],
-                data3: [
+                data9: [
                     {
                         name: '王小明',
                         age: 18,
                         address: '北京市朝阳区芍药居',
-                        province: '北京市',
-                        city: '朝阳区',
-                        zip: 100000
+                        job: '数据工程师',
+                        interest: '羽毛球',
+                        birthday: '1991-05-14',
+                        book: '乔布斯传',
+                        movie: '致命魔术',
+                        music: 'I Cry'
                     },
                     {
                         name: '张小刚',
                         age: 25,
                         address: '北京市海淀区西二旗',
-                        province: '北京市',
-                        city: '海淀区',
-                        zip: 100000
+                        job: '数据科学家',
+                        interest: '排球',
+                        birthday: '1989-03-18',
+                        book: '我的奋斗',
+                        movie: '罗马假日',
+                        music: 'My Heart Will Go On'
                     },
-//                    {
-//                        name: '李小红',
-//                        age: 30,
-//                        address: '上海市浦东新区世纪大道',
-//                        province: '上海市',
-//                        city: '浦东新区',
-//                        zip: 100000
-//                    },
-//                    {
-//                        name: '周小伟',
-//                        age: 26,
-//                        address: '深圳市南山区深南大道',
-//                        province: '广东',
-//                        city: '南山区',
-//                        zip: 100000
-//                    }
+                    {
+                        name: '李小红',
+                        age: 30,
+                        address: '上海市浦东新区世纪大道',
+                        job: '数据产品经理',
+                        interest: '网球',
+                        birthday: '1992-01-31',
+                        book: '赢',
+                        movie: '乔布斯',
+                        music: 'Don’t Cry'
+                    },
+                    {
+                        name: '周小伟',
+                        age: 26,
+                        address: '深圳市南山区深南大道',
+                        job: '数据分析师',
+                        interest: '桌球，跑步',
+                        birthday: '1988-7-25',
+                        book: '红楼梦',
+                        movie: '倩女幽魂',
+                        music: '演员'
+                    }
                 ]
             }
-        },
-        methods: {
-            change1 (d, l) {
-//                console.log(d)
-//                console.log(l)
-            },
-            change2 (d, l) {
-                console.log(d);
-                console.log(l);
-            },
-            addData () {
-                this.data3.push({
-                    name: '周小伟',
-                    age: 26,
-                    address: '深圳市南山区深南大道',
-                    province: '广东',
-                    city: '南山区',
-                    zip: 100000
-                })
-            },
-            edit () {
-                
-            }
         }
     }
 </script>
\ No newline at end of file
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 45c5adce..efa5a8d3 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -7,7 +7,10 @@
             <tr>
                 <th v-for="(column, index) in columns" :class="alignCls(column)">
                     <div :class="cellClasses(column)">
-                        <template v-if="column.type === 'expand'"></template>
+                        <template v-if="column.type === 'expand'">
+                            <span v-if="!column.renderHeader">{{ column.title || '' }}</span>
+                            <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
+                        </template>
                         <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
                         <template v-else>
                             <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span>