From b34e09b8f923917b8debb9f7d0abbe9843d6f39d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 19 Jan 2018 17:34:02 +0800
Subject: [PATCH] fixed #2832

---
 examples/routers/table.vue          | 150 ++++++++++++++++++++--------
 src/components/table/table-head.vue |  17 ++--
 src/components/table/table.vue      |  19 +++-
 3 files changed, 136 insertions(+), 50 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index c9364534..0dd18b27 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,14 +1,117 @@
+<!--<template>-->
+    <!--<Table border :columns="columns6" :data="data5"></Table>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--columns6: [-->
+                    <!--{-->
+                        <!--title: 'Date',-->
+                        <!--key: 'date'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: 'Name',-->
+                        <!--key: 'name'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: 'Gender',-->
+                        <!--key: 'gender'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: 'Age',-->
+                        <!--key: 'age',-->
+                        <!--fixed: 'left',-->
+<!--//                        fixed: 'right',-->
+                        <!--filters: [-->
+                            <!--{-->
+                                <!--label: 'Greater than 25',-->
+                                <!--value: 1-->
+                            <!--},-->
+                            <!--{-->
+                                <!--label: 'Less than 25',-->
+                                <!--value: 2-->
+                            <!--}-->
+                        <!--],-->
+                        <!--filterMultiple: false,-->
+                        <!--filterMethod (value, row) {-->
+                            <!--if (value === 1) {-->
+                                <!--return row.age > 25;-->
+                            <!--} else if (value === 2) {-->
+                                <!--return row.age < 25;-->
+                            <!--}-->
+                        <!--}-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: 'Address',-->
+                        <!--key: 'address',-->
+                        <!--fixed: 'left',-->
+                        <!--filters: [-->
+                            <!--{-->
+                                <!--label: 'New York',-->
+                                <!--value: 'New York'-->
+                            <!--},-->
+                            <!--{-->
+                                <!--label: 'London',-->
+                                <!--value: 'London'-->
+                            <!--},-->
+                            <!--{-->
+                                <!--label: 'Sydney',-->
+                                <!--value: 'Sydney'-->
+                            <!--}-->
+                        <!--],-->
+                        <!--filterMethod (value, row) {-->
+                            <!--return row.address.indexOf(value) > -1;-->
+                        <!--}-->
+                    <!--}-->
+                <!--],-->
+                <!--data5: [-->
+                    <!--{-->
+                        <!--name: 'John Brown',-->
+                        <!--age: 18,-->
+                        <!--gender: 'male',-->
+                        <!--address: 'New York No. 1 Lake Park',-->
+                        <!--date: '2016-10-03'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: 'Jim Green',-->
+                        <!--age: 24,-->
+                        <!--gender: 'female',-->
+                        <!--address: 'London No. 1 Lake Park',-->
+                        <!--date: '2016-10-01'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: 'Joe Black',-->
+                        <!--age: 30,-->
+                        <!--gender: 'male',-->
+                        <!--address: 'Sydney No. 1 Lake Park',-->
+                        <!--date: '2016-10-02'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: 'Jon Snow',-->
+                        <!--age: 26,-->
+                        <!--gender: 'male',-->
+                        <!--address: 'Ottawa No. 2 Lake Park',-->
+                        <!--date: '2016-10-04'-->
+                    <!--}-->
+                <!--],-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
 <template>
-    <Table border :columns="columns6" :data="data5"></Table>
+    <Table border :columns="columns5" :data="data5"></Table>
 </template>
 <script>
     export default {
         data () {
             return {
-                columns6: [
+                columns5: [
                     {
                         title: 'Date',
-                        key: 'date'
+                        key: 'date',
+                        sortable: true
                     },
                     {
                         title: 'Name',
@@ -17,45 +120,12 @@
                     {
                         title: 'Age',
                         key: 'age',
-                        filters: [
-                            {
-                                label: 'Greater than 25',
-                                value: 1
-                            },
-                            {
-                                label: 'Less than 25',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.age > 25;
-                            } else if (value === 2) {
-                                return row.age < 25;
-                            }
-                        }
+                        fixed: 'right',
+                        sortable: true
                     },
                     {
                         title: 'Address',
-                        key: 'address',
-                        filters: [
-                            {
-                                label: 'New York',
-                                value: 'New York'
-                            },
-                            {
-                                label: 'London',
-                                value: 'London'
-                            },
-                            {
-                                label: 'Sydney',
-                                value: 'Sydney'
-                            }
-                        ],
-                        filterMethod (value, row) {
-                            return row.address.indexOf(value) > -1;
-                        }
+                        key: 'address'
                     }
                 ],
                 data5: [
@@ -83,7 +153,7 @@
                         address: 'Ottawa No. 2 Lake Park',
                         date: '2016-10-04'
                     }
-                ],
+                ]
             }
         }
     }
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index c259e4e2..b126a19f 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -23,7 +23,7 @@
                                 v-if="isPopperShow(column)"
                                 v-model="column._filterVisible"
                                 placement="bottom"
-                                @on-popper-hide="handleFilterHide(index)">
+                                @on-popper-hide="handleFilterHide(column._index)">
                                 <span :class="[prefixCls + '-filter']">
                                     <i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
                                 </span>
@@ -34,19 +34,19 @@
                                         </checkbox-group>
                                     </div>
                                     <div :class="[prefixCls + '-filter-footer']">
-                                        <i-button type="text" size="small" :disabled="!column._filterChecked.length" @click.native="handleFilter(index)">{{ t('i.table.confirmFilter') }}</i-button>
-                                        <i-button type="text" size="small" @click.native="handleReset(index)">{{ t('i.table.resetFilter') }}</i-button>
+                                        <i-button type="text" size="small" :disabled="!column._filterChecked.length" @click.native="handleFilter(column._index)">{{ t('i.table.confirmFilter') }}</i-button>
+                                        <i-button type="text" size="small" @click.native="handleReset(column._index)">{{ t('i.table.resetFilter') }}</i-button>
                                     </div>
                                 </div>
                                 <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
                                     <ul :class="[prefixCls + '-filter-list-single']">
                                         <li
                                             :class="itemAllClasses(column)"
-                                            @click="handleReset(index)">{{ t('i.table.clearFilter') }}</li>
+                                            @click="handleReset(column._index)">{{ t('i.table.clearFilter') }}</li>
                                         <li
                                             :class="itemClasses(column, item)"
                                             v-for="item in column.filters"
-                                            @click="handleSelect(index, item.value)">{{ item.label }}</li>
+                                            @click="handleSelect(column._index, item.value)">{{ item.label }}</li>
                                     </ul>
                                 </div>
                             </Poptip>
@@ -133,10 +133,13 @@
                 this.$parent.selectAll(status);
             },
             handleSort (index, type) {
-                if (this.columns[index]._sortType === type) {
+                const column = this.columns[index];
+                const _index = column._index;
+
+                if (column._sortType === type) {
                     type = 'normal';
                 }
-                this.$parent.handleSort(index, type);
+                this.$parent.handleSort(_index, type);
             },
             handleSortByHead (index) {
                 const column = this.columns[index];
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index c997c6c9..1bcf5091 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -522,7 +522,8 @@
                 });
                 return data;
             },
-            handleSort (index, type) {
+            handleSort (_index, type) {
+                const index = this.GetOriginalIndex(_index);
                 this.cloneColumns.forEach((col) => col._sortType = 'normal');
 
                 const key = this.cloneColumns[index].key;
@@ -582,11 +583,23 @@
                 this.cloneColumns[index]._filterVisible = false;
                 this.$emit('on-filter-change', column);
             },
-            handleFilterSelect (index, value) {
+            /**
+             * #2832
+             * 应该区分当前表头的 column 是左固定还是右固定
+             * 否则执行到 $parent 时，方法的 index 与 cloneColumns 的 index 是不对应的
+             * 左固定和右固定，要区分对待
+             * 所以，此方法用来获取正确的 index
+             * */
+            GetOriginalIndex (_index) {
+                return this.cloneColumns.findIndex(item => item._index === _index);
+            },
+            handleFilterSelect (_index, value) {
+                const index = this.GetOriginalIndex(_index);
                 this.cloneColumns[index]._filterChecked = [value];
                 this.handleFilter(index);
             },
-            handleFilterReset (index) {
+            handleFilterReset (_index) {
+                const index = this.GetOriginalIndex(_index);
                 this.cloneColumns[index]._isFiltered = false;
                 this.cloneColumns[index]._filterVisible = false;
                 this.cloneColumns[index]._filterChecked = [];