From c5beedf87edf0a69d6d7561f4887cd82ea3aa532 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 20 Sep 2017 14:18:45 +0800
Subject: [PATCH] fixed #690

---
 examples/routers/table.vue     | 361 +++++++++++++++++++++++++++------
 package-lock.json              |  13 ++
 package.json                   |   1 +
 src/components/table/table.vue |   8 +-
 4 files changed, 322 insertions(+), 61 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 688b33c6..6c3596e0 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,77 +1,315 @@
+<!--<template>-->
+    <!--<div>-->
+        <!--<Table width="550" height="200" highlight-row :loading="loading" :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc">-->
+            <!--<div slot="loading">-->
+                <!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
+                <!--<div>Loading</div>-->
+            <!--</div>-->
+        <!--</Table>-->
+        <!--<br><br>-->
+        <!--<Button @click="handleClear">clear</Button>-->
+        <!--<Button @click="loading = !loading">Loading</Button>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--loading: false,-->
+                <!--columns3: [-->
+                    <!--{-->
+                        <!--title: '姓名',-->
+                        <!--key: 'name',-->
+                        <!--width: 100,-->
+                        <!--fixed: 'left'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '年龄',-->
+                        <!--key: 'age',-->
+                        <!--width: 100-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '省份',-->
+                        <!--key: 'province',-->
+                        <!--width: 100-->
+                    <!--},-->
+                    <!--{-->
+                        <!--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('div', [-->
+                                <!--h('Button', {-->
+                                    <!--props: {-->
+                                        <!--type: 'text',-->
+                                        <!--size: 'small'-->
+                                    <!--}-->
+                                <!--}, '查看'),-->
+                                <!--h('Button', {-->
+                                    <!--props: {-->
+                                        <!--type: 'text',-->
+                                        <!--size: 'small'-->
+                                    <!--}-->
+                                <!--}, '编辑')-->
+                            <!--]);-->
+                        <!--}-->
+                    <!--}-->
+                <!--],-->
+                <!--data1: [-->
+                    <!--{-->
+                        <!--name: '王小明',-->
+                        <!--age: 18,-->
+                        <!--address: '北京市朝阳区芍药居'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '张小刚',-->
+                        <!--age: 25,-->
+                        <!--address: '北京市海淀区西二旗'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '李小红',-->
+                        <!--age: 30,-->
+                        <!--address: '上海市浦东新区世纪大道'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '周小伟',-->
+                        <!--age: 26,-->
+                        <!--address: '深圳市南山区深南大道'-->
+                    <!--}-->
+                <!--]-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--handleClear () {-->
+                <!--this.$refs.table.clearCurrentRow();-->
+            <!--},-->
+            <!--handleChange (newData, oldData) {-->
+<!--//                console.log(newData, oldData)-->
+            <!--},-->
+            <!--rc (data, index) {-->
+                <!--console.log(data, index);-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
+<style scoped>
+    .layout{
+        border: 1px solid #d7dde4;
+        background: #f5f7f9;
+        position: relative;
+        border-radius: 4px;
+        overflow: hidden;
+    }
+    .layout-breadcrumb{
+        padding: 10px 15px 0;
+    }
+    .layout-content{
+        min-height: 200px;
+        margin: 15px;
+        overflow: hidden;
+        background: #fff;
+        border-radius: 4px;
+    }
+    .layout-content-main{
+        padding: 10px;
+    }
+    .layout-copy{
+        text-align: center;
+        padding: 10px 0 20px;
+        color: #9ea7b4;
+    }
+    .layout-menu-left{
+        background: #464c5b;
+    }
+    .layout-header{
+        height: 60px;
+        background: #fff;
+        box-shadow: 0 1px 1px rgba(0,0,0,.1);
+    }
+    .layout-logo-left{
+        width: 90%;
+        height: 30px;
+        background: #5b6270;
+        border-radius: 3px;
+        margin: 15px auto;
+    }
+    .layout-ceiling-main a{
+        color: #9ba7b5;
+    }
+    .layout-hide-text .layout-text{
+        display: none;
+    }
+    .ivu-col{
+        /*transition: width .2s ease-in-out;*/
+    }
+</style>
 <template>
-    <div>
-        <Table width="550" height="200" highlight-row :loading="loading" :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc">
-            <div slot="loading">
-                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
-                <div>Loading</div>
+    <div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
+        <Row type="flex">
+            <Col :span="spanLeft" class="layout-menu-left">
+            <Menu active-name="1" theme="dark" width="auto">
+                <div class="layout-logo-left"></div>
+                <MenuItem name="1">
+                    <Icon type="ios-navigate" :size="iconSize"></Icon>
+                    <span class="layout-text">选项 1</span>
+                </MenuItem>
+                <MenuItem name="2">
+                    <Icon type="ios-keypad" :size="iconSize"></Icon>
+                    <span class="layout-text">选项 2</span>
+                </MenuItem>
+                <MenuItem name="3">
+                    <Icon type="ios-analytics" :size="iconSize"></Icon>
+                    <span class="layout-text">选项 3</span>
+                </MenuItem>
+            </Menu>
+            </Col>
+            <Col :span="spanRight">
+            <div class="layout-header">
+                <Button type="text" @click="toggleClick">
+                    <Icon type="navicon" size="32"></Icon>
+                </Button>
             </div>
-        </Table>
-        <br><br>
-        <Button @click="handleClear">clear</Button>
-        <Button @click="loading = !loading">Loading</Button>
+            <div class="layout-breadcrumb">
+                <Breadcrumb>
+                    <BreadcrumbItem href="#">首页</BreadcrumbItem>
+                    <BreadcrumbItem href="#">应用中心</BreadcrumbItem>
+                    <BreadcrumbItem>某应用</BreadcrumbItem>
+                </Breadcrumb>
+            </div>
+            <div class="layout-content">
+                <div class="layout-content-main">
+                    <Table :columns="columns1" :data="data1"></Table>
+                </div>
+            </div>
+            <div class="layout-copy">
+                2011-2016 &copy; TalkingData
+            </div>
+            </Col>
+        </Row>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                loading: false,
-                columns3: [
+                spanLeft: 5,
+                spanRight: 19,
+                columns1: [
                     {
                         title: '姓名',
-                        key: 'name',
-                        width: 100,
-                        fixed: 'left'
+                        key: 'name'
                     },
                     {
                         title: '年龄',
-                        key: 'age',
-                        width: 100
-                    },
-                    {
-                        title: '省份',
-                        key: 'province',
-                        width: 100
-                    },
-                    {
-                        title: '市区',
-                        key: 'city',
-                        width: 100
+                        key: 'age'
                     },
                     {
                         title: '地址',
-                        key: 'address',
-                        width: 200
+                        key: 'address'
                     },
                     {
-                        title: '邮编',
-                        key: 'zip',
-                        width: 100
+                        title: '姓名',
+                        key: 'name'
                     },
                     {
-                        title: '操作',
-                        key: 'action',
-                        fixed: 'right',
-                        width: 120,
-                        render: (h, params) => {
-                            return h('div', [
-                                h('Button', {
-                                    props: {
-                                        type: 'text',
-                                        size: 'small'
-                                    }
-                                }, '查看'),
-                                h('Button', {
-                                    props: {
-                                        type: 'text',
-                                        size: 'small'
-                                    }
-                                }, '编辑')
-                            ]);
-                        }
+                        title: '年龄',
+                        key: 'age'
+                    },
+                    {
+                        title: '地址',
+                        key: 'address'
+                    },
+                    {
+                        title: '姓名',
+                        key: 'name'
+                    },
+                    {
+                        title: '年龄',
+                        key: 'age'
+                    },
+                    {
+                        title: '地址',
+                        key: 'address'
                     }
                 ],
                 data1: [
+                    {
+                        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: '深圳市南山区深南大道'
+                    },
+                    {
+                        name: '王小明',
+                        age: 18,
+                        address: '北京市朝阳区芍药居'
+                    },
+                    {
+                        name: '张小刚',
+                        age: 25,
+                        address: '北京市海淀区西二旗'
+                    },
+                    {
+                        name: '李小红',
+                        age: 30,
+                        address: '上海市浦东新区世纪大道'
+                    },
+                    {
+                        name: '周小伟',
+                        age: 26,
+                        address: '深圳市南山区深南大道'
+                    },
                     {
                         name: '王小明',
                         age: 18,
@@ -95,15 +333,20 @@
                 ]
             }
         },
+        computed: {
+            iconSize () {
+                return this.spanLeft === 5 ? 14 : 24;
+            }
+        },
         methods: {
-            handleClear () {
-                this.$refs.table.clearCurrentRow();
-            },
-            handleChange (newData, oldData) {
-//                console.log(newData, oldData)
-            },
-            rc (data, index) {
-                console.log(data, index);
+            toggleClick () {
+                if (this.spanLeft === 5) {
+                    this.spanLeft = 2;
+                    this.spanRight = 22;
+                } else {
+                    this.spanLeft = 5;
+                    this.spanRight = 19;
+                }
             }
         }
     }
diff --git a/package-lock.json b/package-lock.json
index 6404a8ab..43b4adbd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1339,6 +1339,11 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
+    },
     "beeper": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz",
@@ -3844,6 +3849,14 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
       "dev": true
     },
+    "element-resize-detector": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.1.12.tgz",
+      "integrity": "sha1-iz/W7t2hf5wAs2Cg6i35knroC6I=",
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "elliptic": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
diff --git a/package.json b/package.json
index 6bfd89ca..958d520a 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "async-validator": "^1.8.1",
     "core-js": "^2.5.0",
     "deepmerge": "^1.5.1",
+    "element-resize-detector": "^1.1.12",
     "popper.js": "^0.6.4",
     "tinycolor2": "^1.4.1"
   },
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 1eeff8cb..c0fcb935 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -96,6 +96,7 @@
     import Csv from '../../utils/csv';
     import ExportCsv from './export-csv';
     import Locale from '../../mixins/locale';
+    import elementResizeDetectorMaker from 'element-resize-detector';
 
     const prefixCls = 'ivu-table';
 
@@ -727,8 +728,11 @@
             this.handleResize();
             this.fixedHeader();
             this.$nextTick(() => this.ready = true);
-//            window.addEventListener('resize', this.handleResize, false);
+
             on(window, 'resize', this.handleResize);
+            this.observer = elementResizeDetectorMaker();
+            this.observer.listenTo(this.$el, this.handleResize);
+
             this.$on('on-visible-change', (val) => {
                 if (val) {
                     this.handleResize();
@@ -737,8 +741,8 @@
             });
         },
         beforeDestroy () {
-//            window.removeEventListener('resize', this.handleResize, false);
             off(window, 'resize', this.handleResize);
+            this.observer.removeListener(this.$el, this.handleResize);
         },
         watch: {
             data: {