From d16dce64d6cd0285b0103f654147b06e38ead030 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Fri, 13 Jan 2017 20:18:21 +0800
Subject: [PATCH] fixed #193

---
 src/components/table/table.vue |  23 +++++++++++++++++++++--
 test/routers/table.vue         | 258 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------
 2 files changed, 222 insertions(+), 59 deletions(-)

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index f351933..cfa938e 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -169,6 +169,7 @@
                 showSlotHeader: true,
                 showSlotFooter: true,
                 bodyHeight: 0,
+                bodyRealHeight: 0,
                 scrollBarWidth: getScrollBarSize()
             };
         },
@@ -206,7 +207,17 @@
             tableStyle () {
                 let style = {};
                 if (this.tableWidth !== 0) {
-                    const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
+                    let width = '';
+                    if (this.bodyHeight === 0) {
+                        width = this.tableWidth;
+                    } else {
+                        if (this.bodyHeight > this.bodyRealHeight) {
+                            width = this.tableWidth;
+                        } else {
+                            width = this.tableWidth - this.scrollBarWidth;
+                        }
+                    }
+//                    const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
                     style.width = `${width}px`;
                 }
                 return style;
@@ -242,7 +253,13 @@
             fixedBodyStyle () {
                 let style = {};
                 if (this.bodyHeight !== 0) {
-                    style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
+                    let height = this.bodyHeight + this.scrollBarWidth - 1;
+
+                    if (this.width && this.width < this.tableWidth){
+                        height = this.bodyHeight;
+                    }
+//                    style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
+                    style.height = this.scrollBarWidth > 0 ? `${height}px` : `${height - 1}px`;
                 }
                 return style;
             },
@@ -315,6 +332,8 @@
                             this.columnsWidth = columnsWidth;
                         }
                     });
+                    // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
+                    this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height'));
                 });
             },
             handleMouseIn (_index) {
diff --git a/test/routers/table.vue b/test/routers/table.vue
index d6d4244..1a49b3e 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -1,79 +1,127 @@
 <template>
-    <!--<i-select :model.sync="model1" style="width:200px">-->
-        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
-    <!--</i-select>-->
-    <i-button @click="data7 = data6">Dispatch</i-button>
-    <br/>
-    <i-table border :content="self" :columns="columns7" :data="data7"></i-table>
-    <br/>
-    <i-table border :content="self" :columns="columns7" :data="data7" size="small"></i-table>
-    <br/>
-    <i-table border :content="self" :columns="columns7" :data="data7" size="large"></i-table>
-    <br/>
-    <i-table border :content="self" :columns="columns7" :data="data7" height="600"></i-table>
+    <div style="width: 800px">
+        <i-table width="550" height="200" border :columns="columns5" :data="data4"></i-table>
+        <br>
+        <i-table border height="300" :columns="columns1" :data="data1"></i-table>
+        <br>
+        <i-table border height="300" :columns="columns1" :data="data2"></i-table>
+        <br>
+        <i-table border height="300" :columns="columns2" :data="data1"></i-table>
+        <br>
+        <i-table border height="300" :columns="columns3" :data="data1"></i-table>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                cityList: [
+                columns1: [
                     {
-                        value: 'beijing',
-                        label: '北京市'
+                        title: '姓名',
+                        key: 'name'
                     },
                     {
-                        value: 'shanghai',
-                        label: '上海市'
+                        title: '年龄',
+                        key: 'age'
                     },
                     {
-                        value: 'shenzhen',
-                        label: '深圳市'
-                    },
+                        title: '地址',
+                        key: 'address'
+                    }
+                ],
+                columns2: [
                     {
-                        value: 'hangzhou',
-                        label: '杭州市'
+                        title: '姓名',
+                        key: 'name'
                     },
                     {
-                        value: 'nanjing',
-                        label: '南京市'
+                        title: '年龄',
+                        key: 'age',
+                        fixed: 'left'
                     },
                     {
-                        value: 'chongqing',
-                        label: '重庆市'
+                        title: '地址',
+                        key: 'address'
                     }
                 ],
-                model1: 'shanghai',
-                self: this,
-                columns7: [
+                columns3: [
                     {
                         title: '姓名',
-                        key: 'name',
-                        render (row, column, index) {
-                            return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
-                        }
+                        key: 'name'
                     },
                     {
                         title: '年龄',
-                        key: 'age'
+                        key: 'age',
+                        fixed: 'right'
                     },
                     {
                         title: '地址',
                         key: 'address'
+                    }
+                ],
+                data1: [
+                    {
+                        name: '王小明',
+                        age: 18,
+                        address: '北京市朝阳区芍药居'
                     },
                     {
-                        title: '操作',
-                        key: 'action',
-                        align: 'center',
-                        render (row, column, index) {
-                            return `
-<i-select :model.sync="model1" style="width:200px">
-        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
-    </i-select><br><br><br>
-`;
-                        }
+                        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: '深圳市南山区深南大道'
                     }
                 ],
-                data6: [
+                data2: [
                     {
                         name: '王小明',
                         age: 18,
@@ -95,18 +143,114 @@
                         address: '深圳市南山区深南大道'
                     }
                 ],
-                data7: []
-            }
-        },
-        methods: {
-            show (index) {
-                this.$Modal.info({
-                    title: '用户信息',
-                    content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
-                })
-            },
-            remove (index) {
-                this.data6.splice(index, 1);
+                columns5: [
+                    {
+                        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 () {
+                            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
+                    }
+                ]
             }
         }
     }
--
libgit2 0.21.4