From 642299b9b8d3e85499e32ebb26a2574a3e0a8319 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 28 Nov 2016 21:30:59 +0800
Subject: [PATCH] update Table

update Table
---
 src/components/table/cell.vue       |  2 +-
 src/components/table/table-head.vue | 16 +++++++-
 src/components/table/table.vue      | 38 ++++++++---------
 src/styles/components/table.less    | 24 +++++++++--
 test/routers/table.vue              | 63 ++++++++++++++++++++++++-----
 5 files changed, 110 insertions(+), 33 deletions(-)

diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 7b82788f..c2a61a2d 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -2,7 +2,7 @@
     <div :class="classes">
         <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
         <template v-if="renderType === 'selection'">
-            <Checkbox :checked="checked" @on-change="toggleSelect">{{checked}}</Checkbox>
+            <Checkbox :checked="checked" @on-change="toggleSelect"></Checkbox>
         </template>
         <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
     </div>
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 1cf0484c..0bf7471d 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -14,6 +14,16 @@
                                 <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>
                             </span>
+                            <Poptip v-if="column.filters" placement="bottom-end">
+                                <span :class="[prefixCls + '-filter']">
+                                    <i class="ivu-icon ivu-icon-chevron-down" @click="handleFilter($index)"></i>
+                                </span>
+                                <div slot="content">
+                                    <ul>
+                                        <li v-for="item in column.filters"><Checkbox>{{ item.label }}</Checkbox></li>
+                                    </ul>
+                                </div>
+                            </Poptip>
                         </template>
                     </div>
                 </th>
@@ -23,12 +33,13 @@
 </template>
 <script>
     import Checkbox from '../checkbox/checkbox.vue';
+    import Poptip from '../poptip/poptip.vue';
     import Mixin from './mixin';
     import { deepCopy } from '../../utils/assist';
 
     export default {
         mixins: [ Mixin ],
-        components: { Checkbox },
+        components: { Checkbox, Poptip },
         props: {
             prefixCls: String,
             style: Object,
@@ -74,6 +85,9 @@
                     type = 'normal';
                 }
                 this.$parent.handleSort(index, type);
+            },
+            handleFilter (index) {
+
             }
         }
     }
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 243d660f..7a24ce29 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -310,24 +310,26 @@
                 this.cloneColumns.forEach((col) => col._sortType = 'normal');
 
                 const key = this.cloneColumns[index].key;
-                if (type === 'asc') {
-                    this.rebuildData.sort((a, b) => {
-                        if (this.cloneColumns[index].sortMethod) {
-                            return this.cloneColumns[index].sortMethod(a, b);
-                        } else {
-                            return a[key] > b[key];
-                        }
-                    });
-                } else if (type === 'desc') {
-                    this.rebuildData.sort((a, b) => {
-                        if (this.cloneColumns[index].sortMethod) {
-                            return this.cloneColumns[index].sortMethod(a, b);
-                        } else {
-                            return a[key] < b[key];
-                        }
-                    });
-                } else if (type === 'normal') {
-                    this.rebuildData = this.makeData();
+                if (this.cloneColumns[index].sortable !== 'custom') {    // custom is for remote sort
+                    if (type === 'asc') {
+                        this.rebuildData.sort((a, b) => {
+                            if (this.cloneColumns[index].sortMethod) {
+                                return this.cloneColumns[index].sortMethod(a, b);
+                            } else {
+                                return a[key] > b[key];
+                            }
+                        });
+                    } else if (type === 'desc') {
+                        this.rebuildData.sort((a, b) => {
+                            if (this.cloneColumns[index].sortMethod) {
+                                return this.cloneColumns[index].sortMethod(a, b);
+                            } else {
+                                return a[key] < b[key];
+                            }
+                        });
+                    } else if (type === 'normal') {
+                        this.rebuildData = this.makeData();
+                    }
                 }
 
                 this.cloneColumns[index]._sortType = type;
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index 71e2712c..d6c89340 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -10,7 +10,6 @@
     border: 1px solid @border-color-base;
     border-bottom: 0;
     border-right: 0;
-    //border-collapse: collapse;
     box-sizing: border-box;
     position: relative;
 
@@ -83,7 +82,7 @@
         text-align: left;
         text-overflow: ellipsis;
         vertical-align: middle;
-        position: relative;
+        //position: relative;
         border-bottom: 1px solid @border-color-split;
     }
 
@@ -135,7 +134,7 @@
     }
     th &-cell{
         display: inline-block;
-        position: relative;
+        //position: relative;
         word-wrap: normal;
         vertical-align: middle;
     }
@@ -219,7 +218,7 @@
     }
     &-fixed-header{
         overflow: hidden;
-        position: relative;
+        //position: relative;
         z-index: 3;
     }
     &-fixed-body{
@@ -231,4 +230,21 @@
     &-sort{
         .sortable();
     }
+    &-filter{
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+
+        i{
+            color: @btn-disable-color;
+            transition: color @transition-time @ease-in-out;
+            &:hover{
+                color: inherit;
+            }
+        }
+    }
+    .ivu-poptip-popper{
+        min-width: 0;
+        text-align: left;
+    }
 }
\ No newline at end of file
diff --git a/test/routers/table.vue b/test/routers/table.vue
index b1fea5d8..014d0f15 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -8,7 +8,8 @@
         <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
         <br>
         <i-table
-                width="550"
+                width="450"
+                :height="height"
                 stripe
                 border
                 highlight-row
@@ -38,7 +39,8 @@
                 columns: [
                     {
                         type: 'selection',
-                        width: 150
+                        width: 50,
+                        align: 'center'
                     },
                     {
                         type: 'index',
@@ -50,15 +52,54 @@
                         align: 'left',
                         fixed: 'left',
                         sortable: true,
-                        width: 100
+                        width: 100,
+                        filters: [
+                            {
+                                label: '家',
+                                value: 'home'
+                            },
+                            {
+                                label: '公司',
+                                value: 'company'
+                            }
+                        ],
+                    },
+                    {
+                        title: '标签',
+                        key: 'tag',
+                        width: 100,
+                        filters: [
+                            {
+                                label: '家',
+                                value: 'home'
+                            },
+                            {
+                                label: '公司',
+                                value: 'company'
+                            }
+                        ],
+                        render (row) {
+                            const type = `${row.tag}` === 'home' ? 'green' : 'red';
+                            return `<tag color="${type}">${row.tag}</tag>`;
+                        }
                     },
                     {
                         title: '年龄',
                         key: 'age',
                         align: 'right',
 //                        fixed: 'left',
-                        sortable: true,
-                        width: 100
+                        sortable: 'custom',
+                        width: 100,
+                        filters: [
+                            {
+                                label: '家',
+                                value: 'home'
+                            },
+                            {
+                                label: '公司',
+                                value: 'company'
+                            }
+                        ],
 //                        render (row) {
 //                            return `<i-button>${row.age}</i-button>`
 //                        }
@@ -93,25 +134,29 @@
                         name: '梁灏',
                         age: 25,
                         address: '北京市朝阳区',
-                        edit: false
+                        edit: false,
+                        tag: 'home'
                     },
                     {
                         name: '段模',
                         age: 21,
                         address: '北京市海淀区',
-                        edit: false
+                        edit: false,
+                        tag: 'company'
                     },
                     {
                         name: '刘天娇',
                         age: 27,
                         address: '北京市东城区',
-                        edit: false
+                        edit: false,
+                        tag: 'company'
                     },
                     {
                         name: '胡国伟',
                         age: 22,
                         address: '北京市西城区',
-                        edit: false
+                        edit: false,
+                        tag: 'home'
                     }
                 ],
                 height: 200