update Table

update Table

src/components/table/table-head.vue

@@ -14,25 +14,31 @@
                                 <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" :visible.sync="column._filterVisible" placement="bottom">
+                            <Poptip
+                                v-if="column.filters && (fixed || (!fixed && !column.fixed))"
+                                :visible.sync="column._filterVisible"
+                                placement="bottom"
+                                @on-popper-hide="handleFilterHide($index)">
                                 <span :class="[prefixCls + '-filter']">
                                     <i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
                                 </span>
-                                <div slot="content" :class="[prefixCls + '-filter-list']">
+                                <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
                                     <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="(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" :disabled="!column._filterChecked.length" @click="handleFilter($index)">筛选</i-button>
                                         <i-button type="text" size="small" @click="handleReset($index)">重置</i-button>
                                     </div>
                                 </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>
+                                    </ul>
+                                </div>
                             </Poptip>
                         </template>
                     </div>
@@ -99,13 +105,13 @@
                 this.$parent.handleSort(index, type);
             },
             handleFilter (index) {
-
+                this.$parent.handleFilter(index);
             },
             handleReset (index) {
-
+                this.$parent.handleFilterReset(index);
             },
-            handleFilterChecked (index, filterIndex) {
+            handleFilterHide (index) {
-
+                this.$parent.handleFilterHide(index);
             }
         }
     }

src/components/table/table.vue

@@ -115,6 +115,7 @@
         },
         data () {
             return {
+                ready: false,
                 tableWidth: 0,
                 columnsWidth: [],
                 prefixCls: prefixCls,
@@ -132,6 +133,7 @@
                 return [
                     `${prefixCls}`,
                     {
+                        [`${prefixCls}-hide`]: !this.ready,
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-border`]: this.border,
                         [`${prefixCls}-stripe`]: this.stripe,
@@ -344,6 +346,27 @@
                     order: type
                 })
             },
+            handleFilterHide (index) {    // clear checked that not filter now
+                if (!this.cloneColumns[index]._isFiltered) this.cloneColumns[index]._filterChecked = [];
+            },
+            handleFilter (index) {
+                const column = this.cloneColumns[index];
+                const filterData = this.makeData();
+
+                this.rebuildData = filterData.filter((row) => {
+                    let status = false;
+                    for (let i = 0; i < column._filterChecked.length; i++) {
+                        status = column.filterMethod(column._filterChecked[i], row);
+                        if (status) break;
+                    }
+                    return status;
+                });
+                this.cloneColumns[index]._isFiltered = true;
+                this.cloneColumns[index]._filterVisible = false;
+            },
+            handleFilterReset (index) {
+                this.cloneColumns[index]._isFiltered = false;
+            },
             makeData () {
                 let data = deepCopy(this.data);
                 data.forEach((row, index) => row._index = index);
@@ -373,6 +396,12 @@
                     column._isFiltered = false;
                     column._filterChecked = [];
 
+                    if ('filterMultiple' in column) {
+                        column._filterMultiple = column.filterMultiple;
+                    } else {
+                        column._filterMultiple = true;
+                    }
+
                     if (column.fixed && column.fixed === 'left') {
                         left.push(column);
                     } else if (column.fixed && column.fixed === 'right') {
@@ -391,6 +420,7 @@
         ready () {
             this.handleResize();
             this.fixedHeader();
+            this.$nextTick(() => this.ready = true);
             window.addEventListener('resize', this.handleResize, false);
         },
         beforeDestroy () {

src/styles/components/table.less

@@ -1,4 +1,5 @@
 @table-prefix-cls: ~"@{css-prefix}table";
+@table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
 
 .@{table-prefix-cls} {
     width: 100%;
@@ -13,6 +14,10 @@
     box-sizing: border-box;
     position: relative;
 
+    &-hide{
+        opacity: 0;
+    }
+
     &:before{
         content: '';
         width: 100%;
@@ -262,6 +267,10 @@
                     }
                 }
             }
+            ul{
+                padding-bottom: 8px;
+            }
+            .select-item(@table-prefix-cls, @table-select-item-prefix-cls);
         }
         &-footer{
             padding: 4px;

test/routers/table.vue

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