update Table

update Table

src/components/table/cell.vue

@@ -1,16 +1,23 @@
 <template>
-    <div :class="[prefixCls + '-cell']">
+    <div :class="classes">
         <template v-if="renderType === 'index'">{{index + 1}}</template>
+        <template v-if="renderType === 'selection'">
+            <Checkbox :checked="checked" @on-change="toggleSelect(index)"></Checkbox>
+        </template>
         <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
     </div>
 </template>
 <script>
+    import Checkbox from '../checkbox/checkbox.vue';
+
     export default {
+        components: { Checkbox },
         props: {
             prefixCls: String,
             row: Object,
             column: Object,
-            index: Number
+            index: Number,
+            checked: Boolean
         },
         data () {
             return {
@@ -18,6 +25,16 @@
                 uid: -1
             }
         },
+        computed: {
+            classes () {
+                return [
+                    `${this.prefixCls}-cell`,
+                    {
+                        [`${this.prefixCls}-hidden`]: this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right')
+                    }
+                ]
+            }
+        },
         methods: {
             compile () {
                 if (this.column.render) {
@@ -41,11 +58,16 @@
                         this.$parent.$parent.$children[i].$destroy();
                     }
                 }
+            },
+            toggleSelect (index) {
+                this.$parent.toggleSelect(index);
             }
         },
         compiled () {
             if (this.column.type === 'index') {
                 this.renderType = 'index';
+            } else if (this.column.type === 'selection') {
+                this.renderType = 'selection';
             } else if (this.column.render) {
                 this.renderType = 'render';
             } else {

src/components/table/table-body.vue

@@ -1,5 +1,7 @@
 <template>
-    
+    <table cellspacing="0" cellpadding="0" border="0">
+
+    </table>
 </template>
 <script>
     export default {

src/components/table/table-column.vue

@@ -1,21 +0,0 @@
-<template>
-    
-</template>
-<script>
-    export default {
-        props: {
-        
-        },
-        data () {
-            return {
-            
-            }
-        },
-        computed: {
-        
-        },
-        methods: {
-        
-        }
-    }
-</script>

src/components/table/table-head.vue

@@ -2,7 +2,7 @@
     <thead>
         <tr>
             <th v-for="column in columns" :class="alignCls(column)">
-                <div :class="[prefixCls + '-cell']">
+                <div :class="[prefixCls + '-cell', {[prefixCls + '-hidden']: column.fixed && (column.fixed === 'left' || column.fixed === 'right')}]">
                     <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
                     <template v-else>{{{ renderHeader(column, $index) }}}</template>
                 </div>

src/components/table/table.vue

@@ -13,7 +13,7 @@
                     :columns="cloneColumns"></thead>
             </table>
         </div>
-        <div :class="[prefixCls + '-body']" :style="bodyStyle" @scroll="handleBodyScroll">
+        <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
             <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody>
                 <colgroup>
                     <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)">
@@ -26,26 +26,28 @@
                         @mouseleave.stop="handleMouseOut(index)"
                         @click.stop="highlightCurrentRow(index)">
                         <td v-for="column in cloneColumns" :class="alignCls(column)">
-                            <div :class="[prefixCls + '-cell']" v-if="column.type === 'selection'">
+                            <Cell
-                                <Checkbox :checked="cloneData[index] && cloneData[index]._isChecked" @on-change="toggleSelect(index)"></Checkbox>
+                                :prefix-cls="prefixCls"
-                            </div>
+                                :row="row"
-                            <Cell v-else :prefix-cls="prefixCls" :row="row" :column="column" :index="index"></Cell>
+                                :column="column"
-                            <!--<div :class="[prefixCls + '-cell']" v-else>-->
+                                :index="index"
-                                <!--{{{ renderRow(row, column, index) }}}-->
+                                :checked="cloneData[index] && cloneData[index]._isChecked"></Cell>
-                            <!--</div>-->
-                            <!--<div :class="[prefixCls + '-cell']">-->
-                                <!--<template v-if="column.type === 'selection'">-->
-                                    <!--<Checkbox :checked="cloneData[index] && cloneData[index]._isChecked" @on-change="toggleSelect(index)"></Checkbox>-->
-                                <!--</template>-->
-                                <!--<template v-else>{{{ renderRow(row, column, index) }}}</template>-->
-                            <!--</div>-->
                         </td>
                     </tr>
                 </tbody>
             </table>
         </div>
         <div :class="[prefixCls + '-fixed']">
+            <table cellspacing="0" cellpadding="0" border="0">
+                <colgroup>
+                    <col v-for="column in leftFixedColumns" :width="setCellWidth(column, $index)">
+                </colgroup>
+                <tbody :class="[prefixCls + '-tbody']">
+                    <tr>
 
+                    </tr>
+                </tbody>
+            </table>
         </div>
         <div :class="[prefixCls + '-fixed-right']">
 
@@ -82,6 +84,9 @@
                     return oneOf(value, ['small', 'large']);
                 }
             },
+            width: {
+                type: [Number, String]
+            },
             height: {
                 type: [Number, String]
             },
@@ -141,6 +146,7 @@
             styles () {
                 let style = {};
                 if (!!this.height) style.height = `${this.height}px`;
+                if (!!this.width) style.width = `${this.width}px`;
                 return style;
             },
             tableStyle () {
@@ -277,8 +283,15 @@
 
                 // todo 固定时上下滚动，固定的表头也滚动 scrollTop
             },
-            handleMouseWheel () {
+            handleMouseWheel (event) {
-                console.log(111)
+                const deltaX = event.deltaX;
+                const $body = this.$els.body;
+
+                if (deltaX > 0) {
+                    $body.scrollLeft = $body.scrollLeft + 10;
+                } else {
+                    $body.scrollLeft = $body.scrollLeft - 10;
+                }
             }
         },
         compiled () {

src/styles/components/table.less

@@ -10,7 +10,7 @@
     border: 1px solid @border-color-base;
     border-bottom: 0;
     border-right: 0;
-    border-collapse: collapse;
+    //border-collapse: collapse;
     box-sizing: border-box;
     position: relative;
 
@@ -130,6 +130,9 @@
         word-break: break-all;
         box-sizing: border-box;
     }
+    &-hidden{
+        visibility: hidden;
+    }
     th &-cell{
         display: inline-block;
         position: relative;

test/routers/table.vue

@@ -8,9 +8,8 @@
         <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
         <br>
         <i-table
-                style="width:450px"
+                width="450"
                 border
-                highlight-row
                 :columns="columns"
                 :data="data"
                 :row-class-name="rowClsName"
@@ -37,6 +36,10 @@
                         type: 'selection',
                         width: 50
                     },
+                    {
+                        type: 'index',
+                        width: 50
+                    },
                     {
                         title: '姓名',
                         key: 'name',
@@ -48,7 +51,7 @@
                         title: '年龄',
                         key: 'age',
                         align: 'right',
-                        fixed: 'left',
+//                        fixed: 'left',
                         width: 100
 //                        render (row) {
 //                            return `<i-button>${row.age}</i-button>`
@@ -151,7 +154,7 @@
 //                    address: '北京市东城区2',
 //                    edit: false
 //                });
-                this.data.splice(1, 1)
+//                this.data.splice(1, 1)
             }, 1000);
         }
     }