From 45e7ed7ef56c7a10772419760c5d641185778f71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 29 Nov 2016 13:25:25 +0800
Subject: [PATCH] update Table

update Table
---
 src/components/table/table-head.vue |  14 +++-
 src/components/table/table.vue      | 122 ++++++++++++++++------------
 src/styles/components/table.less    |  13 +--
 test/routers/table.vue              |  35 +++++---
 4 files changed, 111 insertions(+), 73 deletions(-)

diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 6bf6f9b7..a458a2c8 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -5,7 +5,7 @@
         </colgroup>
         <thead>
             <tr>
-                <th v-for="column in columns" :class="alignCls(column)">
+                <th v-for="(index, column) in columns" :class="alignCls(column)">
                     <div :class="cellClasses(column)">
                         <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
                         <template v-else>
@@ -35,8 +35,13 @@
                                 </div>
                                 <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
                                     <ul>
-                                        <li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.lengtg}]">全部</li>
-                                        <li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: column._filterChecked[0] === item.value}]" v-for="item in column.filters">{{ item.label }}</li>
+                                        <li
+                                            :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.length}]"
+                                            @click="handleReset($index)">全部</li>
+                                        <li
+                                            :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: column._filterChecked[0] === item.value}]"
+                                            v-for="item in column.filters"
+                                            @click="handleSelect(index, item.value)">{{ item.label }}</li>
                                     </ul>
                                 </div>
                             </Poptip>
@@ -107,6 +112,9 @@
             handleFilter (index) {
                 this.$parent.handleFilter(index);
             },
+            handleSelect (index, value) {
+                this.$parent.handleFilterSelect(index, value);
+            },
             handleReset (index) {
                 this.$parent.handleFilterReset(index);
             },
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 6a0180b5..88ad85c4 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -1,61 +1,63 @@
 <template>
-    <div :class="classes" :style="styles">
-        <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
-        <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
-            <table-head
-                :prefix-cls="prefixCls"
-                :style="tableStyle"
-                :columns="cloneColumns"
-                :obj-data="objData"></table-head>
-        </div>
-        <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
-            <table-body
-                v-ref:tbody
-                :prefix-cls="prefixCls"
-                :style="tableStyle"
-                :columns="cloneColumns"
-                :data="rebuildData"
-                :obj-data="objData"></table-body>
-        </div>
-        <div :class="[prefixCls + '-fixed']">
-            <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
+    <div :class="wrapClasses" :style="styles">
+        <div :class="classes" :style="styles">
+            <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
+            <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
                 <table-head
-                    fixed
-                    :prefix-cls="prefixCls"
-                    :style="fixedTableStyle"
-                    :columns="leftFixedColumns"
-                    :obj-data="objData"></table-head>
+                        :prefix-cls="prefixCls"
+                        :style="tableStyle"
+                        :columns="cloneColumns"
+                        :obj-data="objData"></table-head>
             </div>
-            <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
+            <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
                 <table-body
-                    fixed
-                    :prefix-cls="prefixCls"
-                    :style="fixedTableStyle"
-                    :columns="leftFixedColumns"
-                    :data="rebuildData"
-                    :obj-data="objData"></table-body>
+                        v-ref:tbody
+                        :prefix-cls="prefixCls"
+                        :style="tableStyle"
+                        :columns="cloneColumns"
+                        :data="rebuildData"
+                        :obj-data="objData"></table-body>
             </div>
+            <div :class="[prefixCls + '-fixed']">
+                <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
+                    <table-head
+                            fixed
+                            :prefix-cls="prefixCls"
+                            :style="fixedTableStyle"
+                            :columns="leftFixedColumns"
+                            :obj-data="objData"></table-head>
+                </div>
+                <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
+                    <table-body
+                            fixed
+                            :prefix-cls="prefixCls"
+                            :style="fixedTableStyle"
+                            :columns="leftFixedColumns"
+                            :data="rebuildData"
+                            :obj-data="objData"></table-body>
+                </div>
+            </div>
+            <div :class="[prefixCls + '-fixed-right']">
+                <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
+                    <table-head
+                            fixed
+                            :prefix-cls="prefixCls"
+                            :style="fixedRightTableStyle"
+                            :columns="rightFixedColumns"
+                            :obj-data="objData"></table-head>
+                </div>
+                <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
+                    <table-body
+                            fixed
+                            :prefix-cls="prefixCls"
+                            :style="fixedRightTableStyle"
+                            :columns="rightFixedColumns"
+                            :data="rebuildData"
+                            :obj-data="objData"></table-body>
+                </div>
+            </div>
+            <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
         </div>
-        <div :class="[prefixCls + '-fixed-right']">
-            <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
-                <table-head
-                    fixed
-                    :prefix-cls="prefixCls"
-                    :style="fixedRightTableStyle"
-                    :columns="rightFixedColumns"
-                    :obj-data="objData"></table-head>
-            </div>
-            <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
-                <table-body
-                    fixed
-                    :prefix-cls="prefixCls"
-                    :style="fixedRightTableStyle"
-                    :columns="rightFixedColumns"
-                    :data="rebuildData"
-                    :obj-data="objData"></table-body>
-            </div>
-        </div>
-        <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
     </div>
 </template>
 <script>
@@ -129,11 +131,18 @@
             }
         },
         computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-wrapper`,
+                    {
+                        [`${prefixCls}-hide`]: !this.ready
+                    }
+                ]
+            },
             classes () {
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-hide`]: !this.ready,
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-border`]: this.border,
                         [`${prefixCls}-stripe`]: this.stripe,
@@ -364,8 +373,15 @@
                 this.cloneColumns[index]._isFiltered = true;
                 this.cloneColumns[index]._filterVisible = false;
             },
+            handleFilterSelect (index, value) {
+                this.cloneColumns[index]._filterChecked = [value];
+                this.handleFilter(index);
+            },
             handleFilterReset (index) {
                 this.cloneColumns[index]._isFiltered = false;
+                this.cloneColumns[index]._filterVisible = false;
+                this.cloneColumns[index]._filterChecked = [];
+                this.rebuildData = this.makeData();
             },
             makeData () {
                 let data = deepCopy(this.data);
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index abf572c7..05e3973d 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -2,17 +2,21 @@
 @table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
 
 .@{table-prefix-cls} {
+    &-wrapper{
+        position: relative;
+        border: 1px solid @border-color-base;
+        border-bottom: 0;
+        border-right: 0;
+    }
     width: 100%;
     max-width: 100%;
     overflow: hidden;
     color: @text-color;
     font-size: @font-size-small;
     background-color: #fff;
-    border: 1px solid @border-color-base;
-    border-bottom: 0;
-    border-right: 0;
+
     box-sizing: border-box;
-    position: relative;
+    //position: relative;
 
     &-hide{
         opacity: 0;
@@ -202,7 +206,6 @@
         top: 0;
         left: 0;
         box-shadow: @shadow-right;
-        //overflow-x: hidden;
 
         &::before {
             content: '';
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 21a28dab..353c97e9 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -9,7 +9,6 @@
         <br>
         <i-table
                 width="450"
-                :height="height"
                 stripe
                 border
                 highlight-row
@@ -40,6 +39,7 @@
                     {
                         type: 'selection',
                         width: 50,
+                        fixed: 'left',
                         align: 'center'
                     },
                     {
@@ -55,15 +55,22 @@
                         width: 100,
                         filters: [
                             {
-                                label: '家',
-                                value: 'home'
+                                label: '大于25岁',
+                                value: 1
                             },
                             {
-                                label: '公司',
-                                value: 'company'
+                                label: '小于25岁',
+                                value: 2
                             }
                         ],
-                        filterMultiple: false
+                        filterMultiple: false,
+                        filterMethod (value, row) {
+                            if (value === 1) {
+                                return row.age >= 25;
+                            } else if (value === 2) {
+                                return row.age < 25;
+                            }
+                        }
                     },
                     {
                         title: '标签',
@@ -128,8 +135,8 @@
                         fixed: 'right',
                         width: 120,
                         render (row, column, index) {
-                            return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`
-//                            return `<a>${row.name}</a>`
+                            return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
+                            return `<a>${row.name}</a>`;
                         }
                     }
                 ],
@@ -139,28 +146,32 @@
                         age: 25,
                         address: '北京市朝阳区',
                         edit: false,
-                        tag: 'home'
+                        tag: 'home',
+                        action: 1
                     },
                     {
                         name: '段模',
                         age: 21,
                         address: '北京市海淀区',
                         edit: false,
-                        tag: 'company'
+                        tag: 'company',
+                        action: 2
                     },
                     {
                         name: '刘天娇',
                         age: 27,
                         address: '北京市东城区',
                         edit: false,
-                        tag: 'company'
+                        tag: 'company',
+                        action: 3
                     },
                     {
                         name: '胡国伟',
                         age: 22,
                         address: '北京市西城区',
                         edit: false,
-                        tag: 'home'
+                        tag: 'home',
+                        action: 4
                     }
                 ],
                 height: 200