update Table

update Table

src/components/table/table-head.vue

@@ -14,14 +14,24 @@
                                 <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">
+                            <Poptip v-if="column.filters" :visible.sync="column._filterVisible" placement="bottom">
                                 <span :class="[prefixCls + '-filter']">
-                                    <i class="ivu-icon ivu-icon-chevron-down" @click="handleFilter($index)"></i>
+                                    <i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
                                 </span>
-                                <div slot="content">
+                                <div slot="content" :class="[prefixCls + '-filter-list']">
+                                    <div :class="[prefixCls + '-filter-list-item']">
+                                        <checkbox-group :model.sync="column._filterChecked">
+                                            <checkbox v-for="item in column.filters" :value="item.value">{{ item.label }}</checkbox>
+                                        </checkbox-group>
+                                    </div>
                                     <ul>
-                                        <li v-for="item in column.filters"><Checkbox>{{ item.label }}</Checkbox></li>
+                                        <!--<li v-for="(filterIndex, item) in column.filters"><Checkbox :checked="column._filterChecked.indexOf(item.value) > -1" @on-change="handleFilterChecked(index, filterIndex)">{{ item.label }}</Checkbox></li>-->
+
                                     </ul>
+                                    <div :class="[prefixCls + '-filter-footer']">
+                                        <i-button type="text" size="small" @click="handleFilter($index)">筛选</i-button>
+                                        <i-button type="text" size="small" @click="handleReset($index)">重置</i-button>
+                                    </div>
                                 </div>
                             </Poptip>
                         </template>
@@ -32,14 +42,16 @@
     </table>
 </template>
 <script>
+    import CheckboxGroup from '../checkbox/checkbox-group.vue';
     import Checkbox from '../checkbox/checkbox.vue';
     import Poptip from '../poptip/poptip.vue';
+    import iButton from '../button/button.vue';
     import Mixin from './mixin';
     import { deepCopy } from '../../utils/assist';
 
     export default {
         mixins: [ Mixin ],
-        components: { Checkbox, Poptip },
+        components: { CheckboxGroup, Checkbox, Poptip, iButton },
         props: {
             prefixCls: String,
             style: Object,
@@ -88,6 +100,12 @@
             },
             handleFilter (index) {
 
+            },
+            handleReset (index) {
+
+            },
+            handleFilterChecked (index, filterIndex) {
+
             }
         }
     }

src/components/table/table.vue

@@ -291,10 +291,14 @@
                     })
                 }
             },
+            hideColumnFilter () {
+                this.cloneColumns.forEach((col) => col._filterVisible = false);
+            },
             handleBodyScroll (event) {
                 if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft;
                 if (this.leftFixedColumns.length) this.$els.fixedBody.scrollTop = event.target.scrollTop;
                 if (this.rightFixedColumns.length) this.$els.fixedRightBody.scrollTop = event.target.scrollTop;
+                this.hideColumnFilter();
             },
             handleMouseWheel (event) {
                 const deltaX = event.deltaX;
@@ -363,8 +367,11 @@
                 let center = [];
 
                 columns.forEach((column, index) => {
-                    column._sortType = 'normal';
                     column._index = index;
+                    column._sortType = 'normal';
+                    column._filterVisible = false;
+                    column._isFiltered = false;
+                    column._filterChecked = [];
 
                     if (column.fixed && column.fixed === 'left') {
                         left.push(column);

src/styles/components/table.less

@@ -197,7 +197,7 @@
         top: 0;
         left: 0;
         box-shadow: @shadow-right;
-        overflow-x: hidden;
+        //overflow-x: hidden;
 
         &::before {
             content: '';
@@ -241,10 +241,39 @@
             &:hover{
                 color: inherit;
             }
+            &.on{
+                color: @primary-color;
+            }
+        }
+        &-list{
+            padding: 8px 0 0;
+            &-item{
+                padding: 0 12px 8px;
+
+                .ivu-checkbox-wrapper + .ivu-checkbox-wrapper{
+                    margin: 0;
+                }
+                label {
+                    display: block;
+                    margin-bottom: 4px;
+
+                    & > span{
+                        margin-right: 4px;
+                    }
+                }
+            }
+        }
+        &-footer{
+            padding: 4px;
+            border-top: 1px solid @border-color-split;
         }
     }
     .ivu-poptip-popper{
         min-width: 0;
         text-align: left;
+
+        .ivu-poptip-body{
+            padding: 0;
+        }
     }
 }

test/routers/table.vue

@@ -79,7 +79,7 @@
                             }
                         ],
                         render (row) {
-                            const type = `${row.tag}` === 'home' ? 'green' : 'red';
+                            const type = `${row.tag}` === '家' ? 'green' : 'red';
                             return `<tag color="${type}">${row.tag}</tag>`;
                         }
                     },
@@ -135,28 +135,28 @@
                         age: 25,
                         address: '北京市朝阳区',
                         edit: false,
-                        tag: 'home'
+                        tag: '家'
                     },
                     {
                         name: '段模',
                         age: 21,
                         address: '北京市海淀区',
                         edit: false,
-                        tag: 'company'
+                        tag: '公司'
                     },
                     {
                         name: '刘天娇',
                         age: 27,
                         address: '北京市东城区',
                         edit: false,
-                        tag: 'company'
+                        tag: '公司'
                     },
                     {
                         name: '胡国伟',
                         age: 22,
                         address: '北京市西城区',
                         edit: false,
-                        tag: 'home'
+                        tag: '家'
                     }
                 ],
                 height: 200