From 9ea47cb3d276e779dbc4c88a70ae746b0a1c0d0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 26 Mar 2018 14:28:11 +0800
Subject: [PATCH] fixed Table multiple head filter & sort bug

---
 examples/routers/table.vue          | 135 ++++++++++++++++++++++++++--
 src/components/table/table-head.vue |  33 ++++---
 2 files changed, 148 insertions(+), 20 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 4cbd0668..0558bf48 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -3,7 +3,11 @@
         <br><br><br><br><br>
         <Table border :columns="columns1" height="500" :data="data1"></Table>
         <br><br><br><br><br>
-        <Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
+        <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
+        <!--<br><br><br><br><br>-->
+        <Table border :columns="columns5" :data="data5"></Table>
+        <br><br><br><br><br>
+        <Table border :columns="columns6" :data="data5"></Table>
         <br><br><br><br><br>
     </div>
 </template>
@@ -17,7 +21,25 @@
                         key: 'name',
                         align: 'center',
                         width: 200,
-                        fixed: 'left'
+                        fixed: 'left',
+                        filters: [
+                            {
+                                label: 'Joe',
+                                value: 1
+                            },
+                            {
+                                label: 'John',
+                                value: 2
+                            }
+                        ],
+                        filterMultiple: false,
+                        filterMethod (value, row) {
+                            if (value === 1) {
+                                return row.name === 'Joe';
+                            } else if (value === 2) {
+                                return row.name === 'John Brown';
+                            }
+                        }
                     },
                     {
                         title: 'Other',
@@ -27,7 +49,8 @@
                                 title: 'Age',
                                 key: 'age',
                                 align: 'center',
-                                width: 200
+                                width: 200,
+                                sortable: true
                             },
                             {
                                 title: 'Address',
@@ -47,7 +70,8 @@
                                                 title: 'Building',
                                                 key: 'building',
                                                 align: 'center',
-                                                width: 200
+                                                width: 200,
+                                                sortable: true
                                             },
                                             {
                                                 title: 'Door No.',
@@ -210,12 +234,111 @@
                         city: 'Ottawa',
                         zip: 100000
                     }
-                ]
+                ],
+                columns5: [
+                    {
+                        title: 'Date',
+                        key: 'date',
+                        sortable: true
+                    },
+                    {
+                        title: 'Name',
+                        key: 'name'
+                    },
+                    {
+                        title: 'Age',
+                        key: 'age',
+                        sortable: true
+                    },
+                    {
+                        title: 'Address',
+                        key: 'address'
+                    }
+                ],
+                data5: [
+                    {
+                        name: 'John Brown',
+                        age: 18,
+                        address: 'New York No. 1 Lake Park',
+                        date: '2016-10-03'
+                    },
+                    {
+                        name: 'Jim Green',
+                        age: 24,
+                        address: 'London No. 1 Lake Park',
+                        date: '2016-10-01'
+                    },
+                    {
+                        name: 'Joe Black',
+                        age: 30,
+                        address: 'Sydney No. 1 Lake Park',
+                        date: '2016-10-02'
+                    },
+                    {
+                        name: 'Jon Snow',
+                        age: 26,
+                        address: 'Ottawa No. 2 Lake Park',
+                        date: '2016-10-04'
+                    }
+                ],
+                columns6: [
+                    {
+                        title: 'Date',
+                        key: 'date'
+                    },
+                    {
+                        title: 'Name',
+                        key: 'name'
+                    },
+                    {
+                        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;
+                            }
+                        }
+                    },
+                    {
+                        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;
+                        }
+                    }
+                ],
             }
         },
         mounted () {
             const data = [];
-            for (let i = 0; i < 100; i++) {
+            for (let i = 0; i < 20; i++) {
                 data.push({
                     key: i,
                     name: 'John Brown',
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 436df201..fc873609 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -17,42 +17,42 @@
                         </template>
                         <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></Checkbox></template>
                         <template v-else>
-                            <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span>
+                            <span v-if="!column.renderHeader" @click="handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
                             <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
                             <span :class="[prefixCls + '-sort']" v-if="column.sortable">
-                                <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort(index, 'asc')"></i>
-                                <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort(index, 'desc')"></i>
+                                <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
+                                <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
                             </span>
                             <Poptip
                                 v-if="isPopperShow(column)"
-                                v-model="column._filterVisible"
+                                v-model="getColumn(rowIndex, index)._filterVisible"
                                 placement="bottom"
                                 popper-class="ivu-table-popper"
                                 transfer
-                                @on-popper-hide="handleFilterHide(column._index)">
+                                @on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
                                 <span :class="[prefixCls + '-filter']">
-                                    <i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
+                                    <i class="ivu-icon ivu-icon-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
                                 </span>
-                                <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
+                                <div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
                                     <div :class="[prefixCls + '-filter-list-item']">
-                                        <checkbox-group v-model="column._filterChecked">
+                                        <checkbox-group v-model="getColumn(rowIndex, index)._filterChecked">
                                             <checkbox v-for="(item, index) in column.filters" :key="index" :label="item.value">{{ item.label }}</checkbox>
                                         </checkbox-group>
                                     </div>
                                     <div :class="[prefixCls + '-filter-footer']">
-                                        <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>
+                                        <i-button type="text" size="small" :disabled="!getColumn(rowIndex, index)._filterChecked.length" @click.native="handleFilter(getColumn(rowIndex, index)._index)">{{ t('i.table.confirmFilter') }}</i-button>
+                                        <i-button type="text" size="small" @click.native="handleReset(getColumn(rowIndex, index)._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(column._index)">{{ t('i.table.clearFilter') }}</li>
+                                            :class="itemAllClasses(getColumn(rowIndex, index))"
+                                            @click="handleReset(getColumn(rowIndex, index)._index)">{{ t('i.table.clearFilter') }}</li>
                                         <li
-                                            :class="itemClasses(column, item)"
+                                            :class="itemClasses(getColumn(rowIndex, index), item)"
                                             v-for="item in column.filters"
-                                            @click="handleSelect(column._index, item.value)">{{ item.label }}</li>
+                                            @click="handleSelect(getColumn(rowIndex, index)._index, item.value)">{{ item.label }}</li>
                                     </ul>
                                 </div>
                             </Poptip>
@@ -186,6 +186,11 @@
             },
             handleFilterHide (index) {
                 this.$parent.handleFilterHide(index);
+            },
+            // 因为表头嵌套不是深拷贝，所以没有 _ 开头的方法，在 isGroup 下用此列
+            getColumn (rowIndex, index) {
+                const isGroup = this.columnRows.length > 1;
+                return isGroup ? this.columns[rowIndex] : this.headRows[rowIndex][index];
             }
         }
     };