update Table

update Table

src/components/table/table-body.vue

@@ -5,7 +5,7 @@
         </colgroup>
         <tbody :class="[prefixCls + '-tbody']">
             <tr
-                v-for="(index, row) in data"
+                v-for="(index, row) in cloneData"
                 :class="rowClasses(row, index)"
                 @mouseenter.stop="handleMouseIn(index)"
                 @mouseleave.stop="handleMouseOut(index)"
@@ -34,7 +34,6 @@
             prefixCls: String,
             style: Object,
             columns: Array,
-            data: Array,
             cloneData: Array,
             fixed: Boolean
         },
@@ -53,7 +52,7 @@
                 return this.$parent.setCellWidth(column, index);
             },
             rowClsName (index) {
-                return this.$parent.rowClassName(this.data[index], index);
+                return this.$parent.rowClassName(this.cloneData[index], index);
             },
             handleMouseIn (index) {
                 this.$parent.handleMouseIn(index);

src/components/table/table-head.vue

@@ -8,7 +8,13 @@
                 <th v-for="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>{{{ renderHeader(column, $index) }}}</template>
+                        <template v-else>
+                            {{{ renderHeader(column, $index) }}}
+                            <span :class="[prefixCls + '-sort']" v-if="column.sortable">
+                                <i class="ivu-icon ivu-icon-arrow-up-b" @click="handleSortAsc($index)"></i>
+                                <i class="ivu-icon ivu-icon-arrow-down-b" @click="handleSortDesc($index)"></i>
+                            </span>
+                        </template>
                     </div>
                 </th>
             </tr>
@@ -57,6 +63,12 @@
             selectAll () {
                 const status = !this.isSelectAll;
                 this.$parent.selectAll(status);
+            },
+            handleSortAsc (index) {
+                this.$parent.handleSort(index, 'asc');
+            },
+            handleSortDesc (index) {
+                this.$parent.handleSort(index, 'desc');
             }
         }
     }

src/components/table/table.vue

@@ -14,7 +14,6 @@
                 :prefix-cls="prefixCls"
                 :style="tableStyle"
                 :columns="cloneColumns"
-                :data="data"
                 :clone-data="cloneData"></table-body>
         </div>
         <div :class="[prefixCls + '-fixed']">
@@ -32,7 +31,6 @@
                     :prefix-cls="prefixCls"
                     :style="fixedTableStyle"
                     :columns="leftFixedColumns"
-                    :data="data"
                     :clone-data="cloneData"></table-body>
             </div>
         </div>
@@ -51,7 +49,6 @@
                     :prefix-cls="prefixCls"
                     :style="fixedRightTableStyle"
                     :columns="rightFixedColumns"
-                    :data="data"
                     :clone-data="cloneData"></table-body>
             </div>
         </div>
@@ -269,9 +266,11 @@
                 });
                 this.cloneData = tmpData;
 
+                const selection = this.getSelection();
                 if (status) {
-                    this.$emit('on-select-all', this.getSelection());
+                    this.$emit('on-select-all', selection);
                 }
+                this.$emit('on-selection-change', selection);
             },
             fixedHeader () {
                 if (!!this.height) {
@@ -315,6 +314,13 @@
                 } else {
                     $body.scrollLeft = $body.scrollLeft - 10;
                 }
+            },
+            handleSort (index, type) {
+                if (type === 'asc') {
+
+                } else if (type === 'desc') {
+
+                }
             }
         },
         compiled () {

src/styles/components/table.less

@@ -197,7 +197,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        box-shadow: 1px 0 8px #d3d4d6;
+        box-shadow: @shadow-right;
         overflow-x: hidden;
 
         &::before {
@@ -215,7 +215,7 @@
         top: 0;
         left: auto;
         right: 0;
-        box-shadow: -1px 0 8px #d3d4d6;
+        box-shadow: @shadow-left;
     }
     &-fixed-header{
         overflow: hidden;
@@ -227,4 +227,8 @@
         position: relative;
         z-index: 3;
     }
+
+    &-sort{
+        .sortable();
+    }
 }

src/styles/mixins/caret.less

@@ -0,0 +1,33 @@
+// sortable
+.sortable() {
+    display: inline-block;
+    width: 8px;
+    height: 12px;
+    margin-left: 4px;
+    margin-top: -1px;
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+
+    i {
+        display: block;
+        height: 6px;
+        line-height: 6px;
+        overflow: hidden;
+        position: absolute;
+        color: @btn-disable-color;
+        transition: color @transition-time @ease-in-out;
+
+        &:hover{
+            color: inherit;
+        }
+
+        &:first-child{
+            top: 0;
+        }
+        &:last-child{
+            bottom: 0;
+        }
+    }
+}

src/styles/mixins/index.less

@@ -12,3 +12,4 @@
 @import "content";  // card、modal
 @import "tooltip";
 @import "select";
+@import "caret";

test/routers/table.vue

@@ -9,8 +9,9 @@
         <br>
         <i-table
                 width="450"
-                height="200"
+                :height="height"
                 stripe
+                border
                 highlight-row
                 :show-header="true"
                 :columns="columns"
@@ -55,6 +56,7 @@
                         key: 'age',
                         align: 'right',
 //                        fixed: 'left',
+                        sortable: true,
                         width: 100
 //                        render (row) {
 //                            return `<i-button>${row.age}</i-button>`
@@ -80,7 +82,7 @@
                         fixed: 'right',
                         width: 120,
                         render (row, column, index) {
-                            return `<i-button @click="edit(${index})">${row.name}</i-button>`
+                            return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`
 //                            return `<a>${row.name}</a>`
                         }
                     }
@@ -153,7 +155,6 @@
 //                this.columns[2].width = 150;
 //                return;
 //                this.height = 150;
-//                return
 //                this.data.push({
 //                    name: '刘天娇2',
 //                    age: 272,
@@ -161,6 +162,7 @@
 //                    edit: false
 //                });
 //                this.data.splice(1, 1)
+//                this.columns.splice(2,1)
             }, 2000);
         }
     }