update Table compoent

update Table compoent

update Table compoent
梁灏
1 parent 2cb8a6d9
Showing 5 changed files with 81 additions and 8 deletions Show diff stats
src/components/table/table-head.vue
src/components/table/table.vue
src/styles/components/index.less
src/styles/components/table.less
test/routers/table.vue
 <template>
     <thead>
         <tr>
-            <th v-for="column in columns">{{{ renderHeader(column, $index) }}}</th>
+            <th v-for="column in columns" :class="fixedCls(column)">{{{ renderHeader(column, $index) }}}</th>
         </tr>
     </thead>
 </template>
@@ -26,6 +26,9 @@
                 } else {
                     return column.title || '#';
                 }
+            },
+            fixedCls (column) {
+                return column.fixed ? `${this.prefixCls}-${column.fixed}` : '';
             }
         }
     }
 <template>
     <div :class="classes">
-        <div :class="[prefixCls + '-body']">
-            <table>
+        <div :class="[prefixCls + '-header']">
+            <table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}">
                 <colgroup>
-                    <col v-for="column in columns" :width="column.width">
+                    <col v-for="column in columns" :width="setCellWidth(column, $index)">
                 </colgroup>
                 <thead
                     is="table-head"
                     :prefix-cls="prefixCls + '-thead'"
                     :columns="columns"></thead>
+            </table>
+        </div>
+        <div :class="[prefixCls + '-body']">
+            <table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}" v-el:tbody>
+                <colgroup>
+                    <col v-for="column in columns" :width="setCellWidth(column, $index)">
+                </colgroup>
                 <tbody :class="[prefixCls + '-tbody']" v-el:render>
                     <tr :class="[prefixCls + '-row']" v-for="(index, row) in data">
                         <td v-for="column in columns">{{{ renderRow(row, column) }}}</td>
@@ -20,7 +27,7 @@
 </template>
 <script>
     import TableHead from './table-head.vue';
-    import { oneOf } from '../../utils/assist';
+    import { oneOf, getStyle } from '../../utils/assist';
     const prefixCls = 'ivu-table';
     export default {
@@ -72,6 +79,8 @@
         },
         data () {
             return {
+                tableWidth: 0,
+                columnsWidth: [],
                 prefixCls: prefixCls,
                 compiledUids: []
             }
@@ -108,7 +117,7 @@
                         const column = this.columns[i];
                         if (column.render) {
                             for (let j = 0; j < this.data.length; j++) {
-                                // todo 做一个深度缓存，只在需要改render时再重新编译，否则data改变时不用再编译
+                                // todo 做一个缓存，只在需要改render时再重新编译，否则data改变时不用再编译
                                 const row = this.data[j];
                                 const template = column.render(row, column, j);
                                 const cell = document.createElement('div');
@@ -125,11 +134,28 @@
                             }
                         }
                     }
+                    this.handleResize();
                 });
+            },
+            handleResize () {
+                this.tableWidth = parseInt(getStyle(this.$el, 'width'));
+                this.$nextTick(() => {
+                    this.columnsWidth = [];
+                    this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td').forEach((cell) => {
+                        this.columnsWidth.push(parseInt(getStyle(cell, 'width')));
+                    });
+                });
+            },
+            setCellWidth (column, index) {
+                return column.width ? column.width : this.columnsWidth[index];
             }
         },
         ready () {
             this.compileRender();
+            window.addEventListener('resize', this.handleResize, false);
+        },
+        beforeDestroy () {
+            window.removeEventListener('resize', this.handleResize, false);
         },
         watch: {
             data: {
@@ -27,4 +27,5 @@
 @import "input";
 @import "slider";
 @import "cascader";
-@import "transfer";
 \ No newline at end of file
+@import "transfer";
+@import "table";
 \ No newline at end of file
+@table-prefix-cls: ~"@{css-prefix}table";
+
+.@{table-prefix-cls} {
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    max-width: 100%;
+    background-color: #fff;
+    border-collapse: collapse;
+    border: 1px solid @border-color-base;
+    color: @text-color;
+    font-size: @font-size-small;
+
+    &-large {
+        font-size: @font-size-base;
+    }
+
+    & th {
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    & th,
+    td
+    {
+        min-width: 0;
+        height: 40px;
+        box-sizing: border-box;
+        text-align: left;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+        position: relative;
+        border-bottom: 1px solid @border-color-base;
+    }
+}
 \ No newline at end of file
@@ -13,11 +13,15 @@
                 columns: [
                     {
                         title: '姓名',
-                        key: 'name'
+                        key: 'name',
+                        fixed: 'left',
+//                        width: 100
                     },
                     {
                         title: '年龄',
                         key: 'age',
+                        fixed: 'right',
+//                        width: 100
 //                        render (row) {
 //                            return `<i-button>${row.age}</i-button>`
 //                        }
@@ -25,6 +29,8 @@
                     {
                         title: '地址',
                         key: 'address',
+                        fixed: 'center',
+//                        width: 100
 //                        render (row, column, index) {
 //                            if (row.edit) {
 //                                return `<i-input :value.sync="data[${index}].name"></i-input>`;
@@ -36,6 +42,7 @@
                     {
                         title: '操作',
                         key: 'action',
+//                        width: 200,
                         render (row, column, index) {
                             return `<i-button @click="edit(${index})">编辑</i-button>`
                         }
@@ -76,6 +83,7 @@
         },
         ready () {
             setTimeout(() => {
+                return;
                 this.data.push({
                     name: '刘天娇2',
                     age: 272,