From 68b308ee837b8f9e0a7ab7d8a8bfdecba8bada2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 14 Jul 2017 14:52:54 +0800
Subject: [PATCH] fixex #1353

---
 examples/routers/table.vue          | 180 +++++++++++++++++++---------
 src/components/table/table-body.vue |   5 +-
 src/components/table/table-head.vue |   2 +-
 src/components/table/table.vue      |  11 +-
 4 files changed, 138 insertions(+), 60 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 2639c9a8..5e471454 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,57 +1,29 @@
 <template>
-    <Table border :columns="columns5" :data="data5" @on-select="onSelect(true)" @on-select-cancel="onSelect(false)"></Table>
+    <div>
+        <div style="margin: 10px">
+            显示边框 <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch>
+            显示斑马纹 <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch>
+            显示索引 <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch>
+            显示多选框 <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch>
+            显示表头 <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch>
+            表格滚动 <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
+            <br>
+            <br>
+            表格尺寸
+            <Radio-group v-model="tableSize" type="button">
+            <Radio label="large">大</Radio>
+            <Radio label="default">中</Radio>
+            <Radio label="small">小</Radio>
+        </Radio-group>
+        </div>
+        <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table>
+    </div>
 </template>
 <script>
-    import etable from '../components/table.vue';
-    import test from '../components/test.vue';
     export default {
         data () {
             return {
-                columns5: [
-                    {
-                        type: 'selection',
-                        width: 60,
-                        align: 'center'
-                    },
-                    {
-                        type: 'expand',
-                        render: (h) => {
-                            console.log('______hover______');
-                            return h(etable);
-                        },
-                        width: 50
-                    },
-                    {
-                        title: '日期',
-                        key: 'date',
-                        sortable: true
-                    },
-                    {
-                        title: '姓名',
-                        key: 'name'
-                    },
-                    {
-                        title: '年龄',
-                        key: 'age',
-                        sortable: true
-                    },
-                    {
-                        title: '地址',
-                        key: 'address'
-                    },
-                    {
-                        title: '操作',
-                        key: 'name',
-                        render: (h, params) => {
-                            return h(test, {
-                                props: {
-                                    row: params.row
-                                }
-                            });
-                        }
-                    }
-                ],
-                data5: [
+                tableData3: [
                     {
                         name: '王小明',
                         age: 18,
@@ -60,7 +32,7 @@
                     },
                     {
                         name: '张小刚',
-                        age: 25,
+                        age: 24,
                         address: '北京市海淀区西二旗',
                         date: '2016-10-01'
                     },
@@ -76,14 +48,112 @@
                         address: '深圳市南山区深南大道',
                         date: '2016-10-04'
                     },
-                ]
+                    {
+                        name: '王小明',
+                        age: 18,
+                        address: '北京市朝阳区芍药居',
+                        date: '2016-10-03'
+                    },
+                    {
+                        name: '张小刚',
+                        age: 24,
+                        address: '北京市海淀区西二旗',
+                        date: '2016-10-01'
+                    },
+                    {
+                        name: '李小红',
+                        age: 30,
+                        address: '上海市浦东新区世纪大道',
+                        date: '2016-10-02'
+                    },
+                    {
+                        name: '周小伟',
+                        age: 26,
+                        address: '深圳市南山区深南大道',
+                        date: '2016-10-04'
+                    }
+                ],
+                showBorder: false,
+                showStripe: false,
+                showHeader: true,
+                showIndex: true,
+                showCheckbox: false,
+                fixedHeader: false,
+                tableSize: 'default'
             }
         },
-
-        methods: {
-            onSelect (value) {
-                window.alert(value);
+        computed: {
+            tableColumns3 () {
+                let columns = [];
+                if (this.showCheckbox) {
+                    columns.push({
+                        type: 'selection',
+                        width: 60,
+                        align: 'center'
+                    })
+                }
+                if (this.showIndex) {
+                    columns.push({
+                        type: 'index',
+                        width: 60,
+                        align: 'center'
+                    })
+                }
+                columns.push({
+                    title: '日期',
+                    key: 'date',
+                    sortable: true
+                });
+                columns.push({
+                    title: '姓名',
+                    key: 'name'
+                });
+                columns.push({
+                    title: '年龄',
+                    key: 'age',
+                    sortable: true,
+                    filters: [
+                        {
+                            label: '大于25岁',
+                            value: 1
+                        },
+                        {
+                            label: '小于25岁',
+                            value: 2
+                        }
+                    ],
+                    filterMultiple: false,
+                    filterMethod (value, row) {
+                        if (value === 1) {
+                            return row.age > 25;
+                        } else if (value === 2) {
+                            return row.age < 25;
+                        }
+                    }
+                });
+                columns.push({
+                    title: '地址',
+                    key: 'address',
+                    filters: [
+                        {
+                            label: '北京',
+                            value: '北京'
+                        },
+                        {
+                            label: '上海',
+                            value: '上海'
+                        },
+                        {
+                            label: '深圳',
+                            value: '深圳'
+                        }
+                    ],
+                    filterMethod (value, row) {
+                        return row.address.indexOf(value) > -1;
+                    }
+                });
+                return columns;
             }
         }
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index a374624c..efb81834 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -7,6 +7,7 @@
             <template v-for="(row, index) in data">
                 <table-tr
                     :row="row"
+                    :key="row._rowKey"
                     :prefix-cls="prefixCls"
                     @mouseenter.native.stop="handleMouseIn(row._index)"
                     @mouseleave.native.stop="handleMouseOut(row._index)"
@@ -17,7 +18,7 @@
                             :fixed="fixed"
                             :prefix-cls="prefixCls"
                             :row="row"
-                            :key="row"
+                            :key="column._columnKey"
                             :column="column"
                             :natural-index="index"
                             :index="row._index"
@@ -29,7 +30,7 @@
                 </table-tr>
                 <tr v-if="rowExpanded(row._index)">
                     <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
-                        <Expand :key="row" :row="row" :render="expandRender" :index="row._index"></Expand>
+                        <Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand>
                     </td>
                 </tr>
             </template>
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index aa1d69c5..563e1d7a 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -26,7 +26,7 @@
                                 <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
                                     <div :class="[prefixCls + '-filter-list-item']">
                                         <checkbox-group v-model="column._filterChecked">
-                                            <checkbox v-for="item in column.filters" :key="item" :label="item.value">{{ item.label }}</checkbox>
+                                            <checkbox v-for="item in column.filters" :key="column._columnKey" :label="item.value">{{ item.label }}</checkbox>
                                         </checkbox-group>
                                     </div>
                                     <div :class="[prefixCls + '-filter-footer']">
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 5e8cc1d5..40259411 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -44,7 +44,7 @@
                         :styleObject="fixedTableStyle"
                         :columns="leftFixedColumns"
                         :obj-data="objData"
-                        :columns-width.sync="columnsWidth"
+                        :columns-width="columnsWidth"
                         :data="rebuildData"></table-head>
                 </div>
                 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
@@ -95,6 +95,9 @@
 
     const prefixCls = 'ivu-table';
 
+    let rowKey = 1;
+    let columnKey = 1;
+
     export default {
         name: 'Table',
         mixins: [ Locale ],
@@ -562,7 +565,10 @@
             },
             makeData () {
                 let data = deepCopy(this.data);
-                data.forEach((row, index) => row._index = index);
+                data.forEach((row, index) => {
+                    row._index = index;
+                    row._rowKey = rowKey++;
+                });
                 return data;
             },
             makeDataWithSort () {
@@ -629,6 +635,7 @@
 
                 columns.forEach((column, index) => {
                     column._index = index;
+                    column._columnKey = columnKey++;
                     column._width = column.width ? column.width : '';    // update in handleResize()
                     column._sortType = 'normal';
                     column._filterVisible = false;