From 55f90d87decf4a8f1e6ece7ea1c454c2a976252b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 8 Nov 2017 14:39:39 +0800
Subject: [PATCH] fixed #1648

---
 examples/components/tableExpand.vue |  46 ++-
 examples/routers/table.vue          | 601 ++++++++++++++++------------
 src/components/table/table-body.vue |   2 +-
 src/styles/components/table.less    |   4 +
 4 files changed, 386 insertions(+), 267 deletions(-)

diff --git a/examples/components/tableExpand.vue b/examples/components/tableExpand.vue
index b7997a02..99d9344e 100755
--- a/examples/components/tableExpand.vue
+++ b/examples/components/tableExpand.vue
@@ -1,16 +1,44 @@
+<style scoped>
+    .expand-row{
+        margin-bottom: 16px;
+    }
+</style>
 <template>
-    <div>{{ name }}</div>
+    <div>
+        <Row class="expand-row">
+            <Col span="8">
+            <span class="expand-key">Job: </span>
+            <span class="expand-value">{{ row.job }}</span>
+            </Col>
+            <Col span="8">
+            <span class="expand-key">Interest: </span>
+            <span class="expand-value">{{ row.interest }}</span>
+            </Col>
+            <Col span="8">
+            <span class="expand-key">Birthday: </span>
+            <span class="expand-value">{{ row.birthday }}</span>
+            </Col>
+        </Row>
+        <Row>
+            <Col span="8">
+            <span class="expand-key">Favorite book: </span>
+            <span class="expand-value">《{{ row.book }}》</span>
+            </Col>
+            <Col span="8">
+            <span class="expand-key">Favorite movie: </span>
+            <span class="expand-value">{{ row.movie }}</span>
+            </Col>
+            <Col span="8">
+            <span class="expand-key">Favorite music: </span>
+            <span class="expand-value">{{ row.music }}</span>
+            </Col>
+        </Row>
+    </div>
 </template>
 <script>
     export default {
         props: {
-            name: String
-        },
-        created () {
-            console.log(this.name + ': 被创建');
-        },
-        destroyed () {
-            console.log(this.name + ': 被销毁');
+            row: Object
         }
-    }
+    };
 </script>
\ No newline at end of file
diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index ed57bce0..af4d2bbb 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -412,289 +412,376 @@
     <!--};-->
 <!--</script>-->
 
+<!--<template>-->
+    <!--<div>-->
+        <!--<Table :columns="columns8" :data="data7" size="small" ref="table"></Table>-->
+        <!--<br>-->
+        <!--<Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>-->
+        <!--<Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>-->
+        <!--<Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--columns8: [-->
+                    <!--{-->
+                        <!--"title": "名称",-->
+                        <!--"key": "name",-->
+                        <!--"fixed": "left",-->
+                        <!--"width": 200-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "展示",-->
+                        <!--"key": "show",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true,-->
+                        <!--filters: [-->
+                            <!--{-->
+                                <!--label: '大于4000',-->
+                                <!--value: 1-->
+                            <!--},-->
+                            <!--{-->
+                                <!--label: '小于4000',-->
+                                <!--value: 2-->
+                            <!--}-->
+                        <!--],-->
+                        <!--filterMultiple: false,-->
+                        <!--filterMethod (value, row) {-->
+                            <!--if (value === 1) {-->
+                                <!--return row.show > 4000;-->
+                            <!--} else if (value === 2) {-->
+                                <!--return row.show < 4000;-->
+                            <!--}-->
+                        <!--}-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "唤醒",-->
+                        <!--"key": "weak",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "登录",-->
+                        <!--"key": "signin",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "点击",-->
+                        <!--"key": "click",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "激活",-->
+                        <!--"key": "active",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "7日留存",-->
+                        <!--"key": "day7",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "30日留存",-->
+                        <!--"key": "day30",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "次日留存",-->
+                        <!--"key": "tomorrow",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "日活跃",-->
+                        <!--"key": "day",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "周活跃",-->
+                        <!--"key": "week",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"title": "月活跃",-->
+                        <!--"key": "month",-->
+                        <!--"width": 150,-->
+                        <!--"sortable": true-->
+                    <!--}-->
+                <!--],-->
+                <!--data7: [-->
+                    <!--{-->
+                        <!--"name": "推广名称1",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 7302,-->
+                        <!--"weak": 5627,-->
+                        <!--"signin": 1563,-->
+                        <!--"click": 4254,-->
+                        <!--"active": 1438,-->
+                        <!--"day7": 274,-->
+                        <!--"day30": 285,-->
+                        <!--"tomorrow": 1727,-->
+                        <!--"day": 558,-->
+                        <!--"week": 4440,-->
+                        <!--"month": 5610-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"name": "推广名称2",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 4720,-->
+                        <!--"weak": 4086,-->
+                        <!--"signin": 3792,-->
+                        <!--"click": 8690,-->
+                        <!--"active": 8470,-->
+                        <!--"day7": 8172,-->
+                        <!--"day30": 5197,-->
+                        <!--"tomorrow": 1684,-->
+                        <!--"day": 2593,-->
+                        <!--"week": 2507,-->
+                        <!--"month": 1537-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"name": "推广名称3",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 7181,-->
+                        <!--"weak": 8007,-->
+                        <!--"signin": 8477,-->
+                        <!--"click": 1879,-->
+                        <!--"active": 16,-->
+                        <!--"day7": 2249,-->
+                        <!--"day30": 3450,-->
+                        <!--"tomorrow": 377,-->
+                        <!--"day": 1561,-->
+                        <!--"week": 3219,-->
+                        <!--"month": 1588-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"name": "推广名称4",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 9911,-->
+                        <!--"weak": 8976,-->
+                        <!--"signin": 8807,-->
+                        <!--"click": 8050,-->
+                        <!--"active": 7668,-->
+                        <!--"day7": 1547,-->
+                        <!--"day30": 2357,-->
+                        <!--"tomorrow": 7278,-->
+                        <!--"day": 5309,-->
+                        <!--"week": 1655,-->
+                        <!--"month": 9043-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"name": "推广名称5",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 934,-->
+                        <!--"weak": 1394,-->
+                        <!--"signin": 6463,-->
+                        <!--"click": 5278,-->
+                        <!--"active": 9256,-->
+                        <!--"day7": 209,-->
+                        <!--"day30": 3563,-->
+                        <!--"tomorrow": 8285,-->
+                        <!--"day": 1230,-->
+                        <!--"week": 4840,-->
+                        <!--"month": 9908-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"name": "推广名称6",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 6856,-->
+                        <!--"weak": 1608,-->
+                        <!--"signin": 457,-->
+                        <!--"click": 4949,-->
+                        <!--"active": 2909,-->
+                        <!--"day7": 4525,-->
+                        <!--"day30": 6171,-->
+                        <!--"tomorrow": 1920,-->
+                        <!--"day": 1966,-->
+                        <!--"week": 904,-->
+                        <!--"month": 6851-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"name": "推广名称7",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 5107,-->
+                        <!--"weak": 6407,-->
+                        <!--"signin": 4166,-->
+                        <!--"click": 7970,-->
+                        <!--"active": 1002,-->
+                        <!--"day7": 8701,-->
+                        <!--"day30": 9040,-->
+                        <!--"tomorrow": 7632,-->
+                        <!--"day": 4061,-->
+                        <!--"week": 4359,-->
+                        <!--"month": 3676-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"name": "推广名称8",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 862,-->
+                        <!--"weak": 6520,-->
+                        <!--"signin": 6696,-->
+                        <!--"click": 3209,-->
+                        <!--"active": 6801,-->
+                        <!--"day7": 6364,-->
+                        <!--"day30": 6850,-->
+                        <!--"tomorrow": 9408,-->
+                        <!--"day": 2481,-->
+                        <!--"week": 1479,-->
+                        <!--"month": 2346-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"name": "推广名称9",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 567,-->
+                        <!--"weak": 5859,-->
+                        <!--"signin": 128,-->
+                        <!--"click": 6593,-->
+                        <!--"active": 1971,-->
+                        <!--"day7": 7596,-->
+                        <!--"day30": 3546,-->
+                        <!--"tomorrow": 6641,-->
+                        <!--"day": 1611,-->
+                        <!--"week": 5534,-->
+                        <!--"month": 3190-->
+                    <!--},-->
+                    <!--{-->
+                        <!--"name": "推广名称10",-->
+                        <!--"fav": 0,-->
+                        <!--"show": 3651,-->
+                        <!--"weak": 1819,-->
+                        <!--"signin": 4595,-->
+                        <!--"click": 7499,-->
+                        <!--"active": 7405,-->
+                        <!--"day7": 8710,-->
+                        <!--"day30": 5518,-->
+                        <!--"tomorrow": 428,-->
+                        <!--"day": 9768,-->
+                        <!--"week": 2864,-->
+                        <!--"month": 5811-->
+                    <!--}-->
+                <!--]-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--exportData (type) {-->
+                <!--if (type === 1) {-->
+                    <!--this.$refs.table.exportCsv({-->
+                        <!--filename: '原始数据',-->
+                        <!--separator: ';',-->
+                        <!--quoted: true,-->
+                        <!--callback (data) {-->
+                            <!--console.log(data);-->
+                        <!--}-->
+                    <!--});-->
+                <!--} else if (type === 2) {-->
+                    <!--this.$refs.table.exportCsv({-->
+                        <!--filename: '排序和过滤后的数据',-->
+                        <!--original: false-->
+                    <!--});-->
+                <!--} else if (type === 3) {-->
+                    <!--this.$refs.table.exportCsv({-->
+                        <!--filename: '自定义数据',-->
+                        <!--columns: this.columns8.filter((col, index) => index < 4),-->
+                        <!--data: this.data7.filter((data, index) => index < 4)-->
+                    <!--});-->
+                <!--}-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
 <template>
-    <div>
-        <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
-        <br>
-        <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>
-        <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>
-        <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>
-    </div>
+    <Table :columns="columns10" :data="data9"></Table>
 </template>
 <script>
+    import expandRow from '../components/tableExpand.vue';
     export default {
+        components: { expandRow },
         data () {
             return {
-                columns8: [
+                columns10: [
                     {
-                        "title": "名称",
-                        "key": "name",
-                        "fixed": "left",
-                        "width": 200
-                    },
-                    {
-                        "title": "展示",
-                        "key": "show",
-                        "width": 150,
-                        "sortable": true,
-                        filters: [
-                            {
-                                label: '大于4000',
-                                value: 1
-                            },
-                            {
-                                label: '小于4000',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.show > 4000;
-                            } else if (value === 2) {
-                                return row.show < 4000;
-                            }
+                        type: 'expand',
+                        width: 50,
+                        render: (h, params) => {
+                            return h(expandRow, {
+                                props: {
+                                    row: params.row
+                                }
+                            })
                         }
                     },
                     {
-                        "title": "唤醒",
-                        "key": "weak",
-                        "width": 150,
-                        "sortable": true
+                        title: 'Name',
+                        key: 'name'
                     },
                     {
-                        "title": "登录",
-                        "key": "signin",
-                        "width": 150,
-                        "sortable": true
+                        title: 'Age',
+                        key: 'age',
+                        fixed: 'right'
                     },
                     {
-                        "title": "点击",
-                        "key": "click",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "激活",
-                        "key": "active",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "7日留存",
-                        "key": "day7",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "30日留存",
-                        "key": "day30",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "次日留存",
-                        "key": "tomorrow",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "日活跃",
-                        "key": "day",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "周活跃",
-                        "key": "week",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "月活跃",
-                        "key": "month",
-                        "width": 150,
-                        "sortable": true
+                        title: 'Address',
+                        key: 'address',
+                        fixed: 'right'
                     }
                 ],
-                data7: [
+                data9: [
                     {
-                        "name": "推广名称1",
-                        "fav": 0,
-                        "show": 7302,
-                        "weak": 5627,
-                        "signin": 1563,
-                        "click": 4254,
-                        "active": 1438,
-                        "day7": 274,
-                        "day30": 285,
-                        "tomorrow": 1727,
-                        "day": 558,
-                        "week": 4440,
-                        "month": 5610
+                        name: 'John Brown',
+                        age: 18,
+                        address: 'New York No. 1 Lake Park',
+                        job: 'Data engineer',
+                        interest: 'badminton',
+                        birthday: '1991-05-14',
+                        book: 'Steve Jobs',
+                        movie: 'The Prestige',
+                        music: 'I Cry'
                     },
                     {
-                        "name": "推广名称2",
-                        "fav": 0,
-                        "show": 4720,
-                        "weak": 4086,
-                        "signin": 3792,
-                        "click": 8690,
-                        "active": 8470,
-                        "day7": 8172,
-                        "day30": 5197,
-                        "tomorrow": 1684,
-                        "day": 2593,
-                        "week": 2507,
-                        "month": 1537
+                        name: 'Jim Green',
+                        age: 25,
+                        address: 'London No. 1 Lake Park',
+                        job: 'Data Scientist',
+                        interest: 'volleyball',
+                        birthday: '1989-03-18',
+                        book: 'My Struggle',
+                        movie: 'Roman Holiday',
+                        music: 'My Heart Will Go On'
                     },
                     {
-                        "name": "推广名称3",
-                        "fav": 0,
-                        "show": 7181,
-                        "weak": 8007,
-                        "signin": 8477,
-                        "click": 1879,
-                        "active": 16,
-                        "day7": 2249,
-                        "day30": 3450,
-                        "tomorrow": 377,
-                        "day": 1561,
-                        "week": 3219,
-                        "month": 1588
+                        name: 'Joe Black',
+                        age: 30,
+                        address: 'Sydney No. 1 Lake Park',
+                        job: 'Data Product Manager',
+                        interest: 'tennis',
+                        birthday: '1992-01-31',
+                        book: 'Win',
+                        movie: 'Jobs',
+                        music: 'Don’t Cry'
                     },
                     {
-                        "name": "推广名称4",
-                        "fav": 0,
-                        "show": 9911,
-                        "weak": 8976,
-                        "signin": 8807,
-                        "click": 8050,
-                        "active": 7668,
-                        "day7": 1547,
-                        "day30": 2357,
-                        "tomorrow": 7278,
-                        "day": 5309,
-                        "week": 1655,
-                        "month": 9043
-                    },
-                    {
-                        "name": "推广名称5",
-                        "fav": 0,
-                        "show": 934,
-                        "weak": 1394,
-                        "signin": 6463,
-                        "click": 5278,
-                        "active": 9256,
-                        "day7": 209,
-                        "day30": 3563,
-                        "tomorrow": 8285,
-                        "day": 1230,
-                        "week": 4840,
-                        "month": 9908
-                    },
-                    {
-                        "name": "推广名称6",
-                        "fav": 0,
-                        "show": 6856,
-                        "weak": 1608,
-                        "signin": 457,
-                        "click": 4949,
-                        "active": 2909,
-                        "day7": 4525,
-                        "day30": 6171,
-                        "tomorrow": 1920,
-                        "day": 1966,
-                        "week": 904,
-                        "month": 6851
-                    },
-                    {
-                        "name": "推广名称7",
-                        "fav": 0,
-                        "show": 5107,
-                        "weak": 6407,
-                        "signin": 4166,
-                        "click": 7970,
-                        "active": 1002,
-                        "day7": 8701,
-                        "day30": 9040,
-                        "tomorrow": 7632,
-                        "day": 4061,
-                        "week": 4359,
-                        "month": 3676
-                    },
-                    {
-                        "name": "推广名称8",
-                        "fav": 0,
-                        "show": 862,
-                        "weak": 6520,
-                        "signin": 6696,
-                        "click": 3209,
-                        "active": 6801,
-                        "day7": 6364,
-                        "day30": 6850,
-                        "tomorrow": 9408,
-                        "day": 2481,
-                        "week": 1479,
-                        "month": 2346
-                    },
-                    {
-                        "name": "推广名称9",
-                        "fav": 0,
-                        "show": 567,
-                        "weak": 5859,
-                        "signin": 128,
-                        "click": 6593,
-                        "active": 1971,
-                        "day7": 7596,
-                        "day30": 3546,
-                        "tomorrow": 6641,
-                        "day": 1611,
-                        "week": 5534,
-                        "month": 3190
-                    },
-                    {
-                        "name": "推广名称10",
-                        "fav": 0,
-                        "show": 3651,
-                        "weak": 1819,
-                        "signin": 4595,
-                        "click": 7499,
-                        "active": 7405,
-                        "day7": 8710,
-                        "day30": 5518,
-                        "tomorrow": 428,
-                        "day": 9768,
-                        "week": 2864,
-                        "month": 5811
+                        name: 'Jon Snow',
+                        age: 26,
+                        address: 'Ottawa No. 2 Lake Park',
+                        job: 'Data Analyst',
+                        interest: 'snooker',
+                        birthday: '1988-7-25',
+                        book: 'A Dream in Red Mansions',
+                        movie: 'A Chinese Ghost Story',
+                        music: 'actor'
                     }
                 ]
             }
-        },
-        methods: {
-            exportData (type) {
-                if (type === 1) {
-                    this.$refs.table.exportCsv({
-                        filename: '原始数据',
-                        separator: ';',
-                        quoted: true,
-                        callback (data) {
-                            console.log(data);
-                        }
-                    });
-                } else if (type === 2) {
-                    this.$refs.table.exportCsv({
-                        filename: '排序和过滤后的数据',
-                        original: false
-                    });
-                } else if (type === 3) {
-                    this.$refs.table.exportCsv({
-                        filename: '自定义数据',
-                        columns: this.columns8.filter((col, index) => index < 4),
-                        data: this.data7.filter((data, index) => index < 4)
-                    });
-                }
-            }
         }
     }
 </script>
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index c035ab0c..bebd0d9d 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -28,7 +28,7 @@
                         ></Cell>
                     </td>
                 </table-tr>
-                <tr v-if="rowExpanded(row._index)">
+                <tr v-if="rowExpanded(row._index)" :class="{[prefixCls + '-expanded-hidden']: fixed}">
                     <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
                         <Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand>
                     </td>
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index e01d8c40..725f0a74 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -366,4 +366,8 @@
             }
         }
     }
+
+    &-expanded-hidden{
+        visibility: hidden;
+    }
 }