update Table

update Table

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>

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) {
+
             }
         }
     }

src/components/table/table.vue

@@ -310,6 +310,7 @@
                 this.cloneColumns.forEach((col) => col._sortType = 'normal');
 
                 const key = this.cloneColumns[index].key;
+                if (this.cloneColumns[index].sortable !== 'custom') {    // custom is for remote sort
                     if (type === 'asc') {
                         this.rebuildData.sort((a, b) => {
                             if (this.cloneColumns[index].sortMethod) {
@@ -329,6 +330,7 @@
                     } else if (type === 'normal') {
                         this.rebuildData = this.makeData();
                     }
+                }
 
                 this.cloneColumns[index]._sortType = type;
 

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;
+    }
 }

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,
+                        sortable: 'custom',
-                        width: 100
+                        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