From 3d6fa54b39a82960b0d981e3e000973f9c9974ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 5 Jan 2017 13:15:26 +0800
Subject: [PATCH] update Table

update Table
---
 src/components/table/mixin.js       |  13 +-
 src/components/table/table-body.vue |   2 +-
 src/components/table/table-head.vue |   2 +-
 src/components/table/table.vue      |  30 ++-
 test/routers/table.vue              | 315 ++++++++++++++++++++++------
 5 files changed, 288 insertions(+), 74 deletions(-)

diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index cef16e83..eedc904f 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -11,15 +11,22 @@ export default {
         isPopperShow (column) {
             return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
         },
-        setCellWidth (column) {
-            // return column.width ? column.width : this.columnsWidth[index];
+        setCellWidth (column, index, top) {
             let width = '';
             if (column.width) {
                 width = column.width;
             } else if (this.columnsWidth[column._index]) {
                 width = this.columnsWidth[column._index].width;
             }
-            // return this.columnsWidth[column._index] ? this.columnsWidth[column._index].width : '';
+            // when browser has scrollBar,set a width to resolve scroll position bug
+            if (this.columns.length === index + 1 && top) {
+                width += this.$parent.scrollBarWidth;
+            }
+            // when fixed type,reset first right fixed column's width
+            if (this.fixed === 'right') {
+                const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
+                if (firstFixedIndex === index) width += this.$parent.scrollBarWidth;
+            }
             return width;
         }
     }
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index cf694d0a..bb736857 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -1,7 +1,7 @@
 <template>
     <table cellspacing="0" cellpadding="0" border="0" :style="style">
         <colgroup>
-            <col v-for="column in columns" :width="setCellWidth(column, $index)">
+            <col v-for="column in columns" :width="setCellWidth(column, $index, false)">
         </colgroup>
         <tbody :class="[prefixCls + '-tbody']">
             <tr
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index d09e1537..358b945b 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -1,7 +1,7 @@
 <template>
     <table cellspacing="0" cellpadding="0" border="0" :style="style">
         <colgroup>
-            <col v-for="column in columns" :width="setCellWidth(column, $index)">
+            <col v-for="column in columns" :width="setCellWidth(column, $index, true)">
         </colgroup>
         <thead>
             <tr>
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 9ee5db12..20495a24 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -85,7 +85,7 @@
 <script>
     import tableHead from './table-head.vue';
     import tableBody from './table-body.vue';
-    import { oneOf, getStyle, deepCopy } from '../../utils/assist';
+    import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
     import Csv from '../../utils/csv';
     import ExportCsv from './export-csv';
     const prefixCls = 'ivu-table';
@@ -143,11 +143,11 @@
             },
             noDataText: {
                 type: String,
-                default: '无数据'
+                default: '暂无数据'
             },
             noFilteredDataText: {
                 type: String,
-                default: '无筛选结果'
+                default: '暂无筛选结果'
             }
         },
         data () {
@@ -162,7 +162,8 @@
                 cloneColumns: this.makeColumns(),
                 showSlotHeader: true,
                 showSlotFooter: true,
-                bodyHeight: 0
+                bodyHeight: 0,
+                scrollBarWidth: getScrollBarSize()
             };
         },
         computed: {
@@ -189,13 +190,19 @@
             },
             styles () {
                 let style = {};
-                if (this.height) style.height = `${this.height}px`;
+                if (this.height) {
+                    const height = (this.isLeftFixed || this.isRightFixed) ? parseInt(this.height) + this.scrollBarWidth : parseInt(this.height);
+                    style.height = `${height}px`;
+                }
                 if (this.width) style.width = `${this.width}px`;
                 return style;
             },
             tableStyle () {
                 let style = {};
-                if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`;
+                if (this.tableWidth !== 0) {
+                    const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
+                    style.width = `${width}px`;
+                }
                 return style;
             },
             fixedTableStyle () {
@@ -213,17 +220,24 @@
                 this.rightFixedColumns.forEach((col) => {
                     if (col.fixed && col.fixed === 'right') width += col._width;
                 });
+                width += this.scrollBarWidth;
                 style.width = `${width}px`;
                 return style;
             },
             bodyStyle () {
                 let style = {};
-                if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`;
+                if (this.bodyHeight !== 0) {
+                    // add a height to resolve scroll bug when browser has a scrollBar in fixed type and height prop
+                    const height = (this.isLeftFixed || this.isRightFixed) ? this.bodyHeight + this.scrollBarWidth : this.bodyHeight;
+                    style.height = `${height}px`;
+                }
                 return style;
             },
             fixedBodyStyle () {
                 let style = {};
-                if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
+                if (this.bodyHeight !== 0) {
+                    style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
+                }
                 return style;
             },
             leftFixedColumns () {
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 23e24cbe..195943a5 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -1,80 +1,273 @@
+<style>
+    body{
+        overflow: hidden;
+    }
+</style>
 <template>
-    <i-button @click="changeFilter">改变filter</i-button>
-    <span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>
-    <Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis
-    <i-table
-      border
-      :columns="columns6"
-      width="500"
-      :data="[]"
-      :highlight-row="true"
-      @on-current-change="onCurrentChange"
-      @on-dblclick="onDblclick">
-    </i-table>
+    <i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>
+    <!--<i-button @click="changeFilter">改变filter</i-button>-->
+    <!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>-->
+    <!--<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis-->
+    <!--<i-table-->
+      <!--border-->
+      <!--:columns="columns6"-->
+      <!--width="500"-->
+      <!--:data="[]"-->
+      <!--:highlight-row="true"-->
+      <!--@on-current-change="onCurrentChange"-->
+      <!--@on-dblclick="onDblclick">-->
+    <!--</i-table>-->
 
-    <br/>
+    <!--<br/>-->
 
-    <i-table
-      border
-      :columns="columns7"
-      :data="[]"
-      no-data-text="No Data"
-      :highlight-row="true"
-      @on-current-change="onCurrentChange"
-      @on-dblclick="onDblclick">
-    </i-table>
+    <!--<i-table-->
+      <!--border-->
+      <!--:columns="columns7"-->
+      <!--:data="[]"-->
+      <!--no-data-text="No Data"-->
+      <!--:highlight-row="true"-->
+      <!--@on-current-change="onCurrentChange"-->
+      <!--@on-dblclick="onDblclick">-->
+    <!--</i-table>-->
 
-    <br/>
+    <!--<br/>-->
 
-    <i-table
-      border
-      :columns="columns7"
-      :data="[]"
-      size="small"
-      :highlight-row="true"
-      @on-current-change="onCurrentChange"
-      @on-dblclick="onDblclick">
-    </i-table>
+    <!--<i-table-->
+      <!--border-->
+      <!--:columns="columns7"-->
+      <!--:data="[]"-->
+      <!--size="small"-->
+      <!--:highlight-row="true"-->
+      <!--@on-current-change="onCurrentChange"-->
+      <!--@on-dblclick="onDblclick">-->
+    <!--</i-table>-->
 
-    <br/>
+    <!--<br/>-->
 
-    <i-table
-      border
-      :columns="columns7"
-      :data="[]"
-      size="large"
-      :highlight-row="true"
-      @on-current-change="onCurrentChange"
-      @on-dblclick="onDblclick">
-    </i-table>
+    <!--<i-table-->
+      <!--border-->
+      <!--:columns="columns7"-->
+      <!--:data="[]"-->
+      <!--size="large"-->
+      <!--:highlight-row="true"-->
+      <!--@on-current-change="onCurrentChange"-->
+      <!--@on-dblclick="onDblclick">-->
+    <!--</i-table>-->
 
-    <br/>
+    <!--<br/>-->
 
-    <i-table
-      border
-      :columns="columns7"
-      :data="data5"
-      :highlight-row="true"
-      @on-current-change="onCurrentChange"
-      @on-dblclick="onDblclick">
-    </i-table>
+    <!--<i-table-->
+      <!--border-->
+      <!--:columns="columns7"-->
+      <!--:data="data5"-->
+      <!--:highlight-row="true"-->
+      <!--@on-current-change="onCurrentChange"-->
+      <!--@on-dblclick="onDblclick">-->
+    <!--</i-table>-->
 
-    <br/>
+    <!--<br/>-->
 
-    <i-table
-      border
-      :columns="columns6"
-      width="500"
-      :data="data5"
-      :highlight-row="true"
-      @on-current-change="onCurrentChange"
-      @on-dblclick="onDblclick">
-    </i-table>
+    <!--<i-table-->
+      <!--border-->
+      <!--:columns="columns6"-->
+      <!--width="500"-->
+      <!--:data="data5"-->
+      <!--:highlight-row="true"-->
+      <!--@on-current-change="onCurrentChange"-->
+      <!--@on-dblclick="onDblclick">-->
+    <!--</i-table>-->
 </template>
 <script>
     export default {
         data () {
             return {
+                columns2: [
+                    {
+                        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',
+                        fixed: 'right',
+                        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
+                    }
+                ],
+                columns1: [
+                    {
+                        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: '深圳市南山区深南大道'
+                    }
+                ],
+                data2: [
+                    {
+                        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: '深圳市南山区深南大道'
+                    }
+                ],
                 columns6: [
                     {
                         type: 'selection',