From 300bd6623e7660906862f940d10fef5ac682dc75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 18 Sep 2017 18:41:24 +0800
Subject: [PATCH] fixed #704

---
 examples/routers/table.vue      | 61 ++++++++++++++++++++++++++++-----
 src/components/table/table.vue  | 10 +++++-
 src/styles/components/spin.less | 11 +++++-
 3 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 72500181..688b33c6 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,31 +1,74 @@
 <template>
     <div>
-        <Table highlight-row :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc"></Table>
+        <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: [
-                    {
-                        type: 'index',
-                        width: 60,
-                        align: 'center'
-                    },
                     {
                         title: '姓名',
-                        key: 'name'
+                        key: 'name',
+                        width: 100,
+                        fixed: 'left'
                     },
                     {
                         title: '年龄',
                         key: 'age',
-                        sortable: true
+                        width: 100
+                    },
+                    {
+                        title: '省份',
+                        key: 'province',
+                        width: 100
+                    },
+                    {
+                        title: '市区',
+                        key: 'city',
+                        width: 100
                     },
                     {
                         title: '地址',
-                        key: 'address'
+                        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: [
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 51a5b32b..1eeff8cb 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -82,11 +82,15 @@
             </div>
             <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div>
         </div>
+        <Spin fix size="large" v-if="loading">
+            <slot name="loading"></slot>
+        </Spin>
     </div>
 </template>
 <script>
     import tableHead from './table-head.vue';
     import tableBody from './table-body.vue';
+    import Spin from '../spin/spin.vue';
     import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
     import { on, off } from '../../utils/dom';
     import Csv from '../../utils/csv';
@@ -101,7 +105,7 @@
     export default {
         name: 'Table',
         mixins: [ Locale ],
-        components: { tableHead, tableBody },
+        components: { tableHead, tableBody, Spin },
         props: {
             data: {
                 type: Array,
@@ -159,6 +163,10 @@
             },
             disabledHover: {
                 type: Boolean
+            },
+            loading: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
diff --git a/src/styles/components/spin.less b/src/styles/components/spin.less
index 2b090590..c5b35bbc 100644
--- a/src/styles/components/spin.less
+++ b/src/styles/components/spin.less
@@ -31,7 +31,7 @@
         left: 0;
         z-index: @zindex-spin;
         .square(100%);
-        background-color: rgba(255,255,255,.95);
+        background-color: rgba(255,255,255,.9);
     }
 
     &-fix &-main {
@@ -56,6 +56,15 @@
     }
 }
 
+// use in Table loading, Table right border is not included in .ivu-table-wrapper, so fix it
+.@{table-prefix-cls}-wrapper{
+    > .@{spin-prefix-cls}-fix{
+        border: 1px solid @border-color-base;
+        border-top: 0;
+        border-left: 0;
+    }
+}
+
 @keyframes ani-spin-bounce {
     0% {
         transform: scale(0);