update Table

update Table

src/components/table/mixin.js

@@ -0,0 +1,7 @@
+export default {
+    methods: {
+        alignCls (column) {
+            return column.align ? `${this.prefixCls}-column-${column.align}` : '';
+        }
+    }
+}

src/components/table/table-head.vue

@@ -1,15 +1,27 @@
 <template>
     <thead>
         <tr>
-            <th v-for="column in columns" :class="fixedCls(column)">{{{ renderHeader(column, $index) }}}</th>
+            <th v-for="column in columns" :class="alignCls(column)">
+                <div :class="[prefixCls + '-cell']">
+                    <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
+                    <template v-else>{{{ renderHeader(column, $index) }}}</template>
+                </div>
+            </th>
         </tr>
     </thead>
 </template>
 <script>
+    import Checkbox from '../checkbox/checkbox.vue';
+    import Mixin from './mixin';
+    import { deepCopy } from '../../utils/assist';
+
     export default {
+        mixins: [ Mixin ],
+        components: { Checkbox },
         props: {
             prefixCls: String,
-            columns: Array
+            columns: Array,
+            cloneData: Array
         },
         data () {
             return {
@@ -17,7 +29,9 @@
             }
         },
         computed: {
-        
+            isSelectAll () {
+                return !this.cloneData.some(data => !data._isChecked);
+            }
         },
         methods: {
             renderHeader (column, $index) {
@@ -27,8 +41,18 @@
                     return column.title || '#';
                 }
             },
-            fixedCls (column) {
+            selectAll () {
-                return column.fixed ? `${this.prefixCls}-${column.fixed}` : '';
+                const status = !this.isSelectAll;
+
+                let tmpData = deepCopy(this.cloneData);
+                tmpData.forEach((data) => {
+                    data._isChecked = status;
+                });
+                this.cloneData = tmpData;
+
+                if (status) {
+                    this.$parent.selectAll();
+                }
             }
         }
     }

src/components/table/table.vue

@@ -1,24 +1,35 @@
 <template>
     <div :class="classes">
-        <div :class="[prefixCls + '-header']">
+        <div :class="[prefixCls + '-header']" v-if="showHeader">
-            <table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}">
+            <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle">
                 <colgroup>
                     <col v-for="column in columns" :width="setCellWidth(column, $index)">
                 </colgroup>
                 <thead
                     is="table-head"
-                    :prefix-cls="prefixCls + '-thead'"
+                    :prefix-cls="prefixCls"
+                    :clone-data.sync="cloneData"
                     :columns="columns"></thead>
             </table>
         </div>
         <div :class="[prefixCls + '-body']">
-            <table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}" v-el:tbody>
+            <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" 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">
+                    <tr
-                        <td v-for="column in columns">{{{ renderRow(row, column) }}}</td>
+                        v-for="(index, row) in data"
+                        :class="[prefixCls + '-row', {[prefixCls + '-row-highlight']: cloneData[index] && cloneData[index]._isHighlight}]"
+                        @click.stop="highlightCurrentRow(index)">
+                        <td v-for="column in columns" :class="alignCls(column)">
+                            <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>
@@ -27,11 +38,14 @@
 </template>
 <script>
     import TableHead from './table-head.vue';
-    import { oneOf, getStyle } from '../../utils/assist';
+    import Checkbox from '../checkbox/checkbox.vue';
+    import Mixin from './mixin';
+    import { oneOf, getStyle, deepCopy } from '../../utils/assist';
     const prefixCls = 'ivu-table';
 
     export default {
-        components: { TableHead },
+        mixins: [ Mixin ],
+        components: { TableHead, Checkbox },
         props: {
             data: {
                 type: Array,
@@ -58,21 +72,11 @@
                 type: Boolean,
                 default: false
             },
-            fit: {
-                type: Boolean,
-                default: true
-            },
             showHeader: {
                 type: Boolean,
                 default: true
             },
-            selection: {
+            highlightRow: {
-                validator (value) {
-                    return oneOf(value, ['single', 'multiple', false]);
-                },
-                default: false
-            },
-            showIndex: {
                 type: Boolean,
                 default: false
             }
@@ -82,7 +86,8 @@
                 tableWidth: 0,
                 columnsWidth: [],
                 prefixCls: prefixCls,
-                compiledUids: []
+                compiledUids: [],
+                cloneData: deepCopy(this.data)
             }
         },
         computed: {
@@ -90,14 +95,21 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-${this.size}`]: !!this.size
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-border`]: this.border,
+                        [`${prefixCls}-stripe`]: this.stripe
                     }
                 ]
+            },
+            tableStyle () {
+                let style = {};
+                if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`;
+                return style;
             }
         },
         methods: {
-            renderRow (row, column) {
+            renderRow (row, column, index) {
-                return 'render' in column ? '' : row[column.key];
+                return column.type === 'index' ? index + 1 : column.render ? '' : row[column.key];
             },
             compileRender (update = false) {
                 this.$nextTick(() => {
@@ -117,7 +129,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');
@@ -129,8 +141,8 @@
                                 if (_oldParentChildLen !== _newParentChildLen) {    // if render normal html node, do not tag
                                     this.compiledUids.push(this.$parent.$children[this.$parent.$children.length - 1]._uid);    // tag it, and delete when data or columns update
                                 }
-                                $el.children[j].children[i].innerHTML = '';
+                                $el.children[j].children[i].children[0].innerHTML = '';
-                                $el.children[j].children[i].appendChild(cell);
+                                $el.children[j].children[i].children[0].appendChild(cell);
                             }
                         }
                     }
@@ -148,6 +160,49 @@
             },
             setCellWidth (column, index) {
                 return column.width ? column.width : this.columnsWidth[index];
+            },
+            highlightCurrentRow (index) {
+                if (!this.highlightRow || this.cloneData[index]._isHighlight) return;
+
+                let oldIndex = -1;
+                this.cloneData.forEach((item, index) => {
+                    if (item._isHighlight) {
+                        oldIndex = index;
+                        item._isHighlight = false;
+                        return true;
+                    }
+                });
+                const row = Object.assign({}, this.cloneData[index], {
+                    _isHighlight: true
+                });
+                this.cloneData.$set(index, row);
+
+                const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex]));
+                this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[index])), oldData);
+            },
+            getSelection () {
+                let selectionIndexes = [];
+                this.cloneData.forEach((data, index) => {
+                    if (data._isChecked) selectionIndexes.push(index);
+                });
+
+                return JSON.parse(JSON.stringify(this.data.filter((data, index) => selectionIndexes.indexOf(index) > -1)));
+            },
+            toggleSelect (index) {
+                const status = !this.cloneData[index]._isChecked;
+                const row = Object.assign({}, this.cloneData[index], {
+                    _isChecked: status
+                });
+                this.cloneData.$set(index, row);
+
+                const selection = this.getSelection();
+                if (status) {
+                    this.$emit('on-select', selection, JSON.parse(JSON.stringify(this.data[index])));
+                }
+                this.$emit('on-selection-change', selection);
+            },
+            selectAll () {
+                this.$emit('on-select-all', this.getSelection());
             }
         },
         ready () {
@@ -160,6 +215,7 @@
         watch: {
             data: {
                 handler () {
+                    this.cloneData = deepCopy(this.data);
                     this.compileRender(true);
                 },
                 deep: true

src/styles/components/table.less

@@ -1,35 +1,118 @@
 @table-prefix-cls: ~"@{css-prefix}table";
 
 .@{table-prefix-cls} {
-    position: relative;
+    width: 100%;
-    overflow: hidden;
-    box-sizing: border-box;
     max-width: 100%;
-    background-color: #fff;
+    overflow: hidden;
-    border-collapse: collapse;
-    border: 1px solid @border-color-base;
     color: @text-color;
     font-size: @font-size-small;
+    background-color: #fff;
+    border: 1px solid @border-color-base;
+    border-bottom: 0;
+    border-collapse: collapse;
+    box-sizing: border-box;
+    position: relative;
 
-    &-large {
+    th, td
-        font-size: @font-size-base;
-    }
-
-    & th {
-        white-space: nowrap;
-        overflow: hidden;
-    }
-
-    & th,
-    td
     {
         min-width: 0;
-        height: 40px;
+        height: 48px;
         box-sizing: border-box;
         text-align: left;
         text-overflow: ellipsis;
         vertical-align: middle;
         position: relative;
-        border-bottom: 1px solid @border-color-base;
+        border-bottom: 1px solid @border-color-split;
+    }
+
+    th {
+        height: 40px;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: @table-thead-bg;
+    }
+    td{
+        background-color: #fff;
+        transition: background-color @transition-time @ease-in-out;
+    }
+
+    th&-column,
+    td&-column
+    {
+        &-left{
+            text-align: left;
+        }
+        &-center{
+            text-align: center;
+        }
+        &-right{
+            text-align: right;
+        }
+    }
+
+    & table{
+        width: 100%;
+    }
+    &-border{
+        th,td{
+            border-right: 1px solid @border-color-split;
+        }
+    }
+    &-cell{
+        padding-left: 18px;
+        padding-right: 18px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        word-break: break-all;
+        box-sizing: border-box;
+    }
+    th &-cell{
+        display: inline-block;
+        position: relative;
+        word-wrap: normal;
+        vertical-align: middle;
+    }
+
+    &-stripe &-body{
+        tr:nth-child(2n) {
+            td{
+                background-color: @table-td-stripe-bg;
+            }
+        }
+    }
+
+    tr:hover{
+        td{
+            background-color: @table-td-hover-bg;
+        }
+    }
+
+    &-large {
+        font-size: @font-size-base;
+        th{
+            height: 48px;
+        }
+        td{
+            height: 60px;
+        }
+    }
+
+    &-small{
+        th{
+            height: 32px;
+        }
+        td{
+            height: 40px;
+        }
+    }
+
+    &-row-highlight,
+    tr&-row-highlight:hover,
+    &-stripe &-body tr&-row-highlight:nth-child(2n)
+    {
+        td{
+            background-color: @table-td-highlight-bg;
+        }
     }
 }

src/styles/themes/default/custom.less

@@ -38,6 +38,10 @@
 @background-color-select-hover: @input-disabled-bg;
 @tooltip-bg                   : rgba(70, 76, 91, .9);
 @head-bg                      : #f9fafc;
+@table-thead-bg               : #f5f7f9;
+@table-td-stripe-bg           : #f5f7f9;
+@table-td-hover-bg            : #ebf7ff;
+@table-td-highlight-bg        : #ebf7ff;
 
 // Shadow
 @shadow-color           : rgba(0, 0, 0, .2);

src/utils/assist.js

@@ -70,7 +70,7 @@ export function getStyle (element, styleName) {
         styleName = 'cssFloat';
     }
     try {
-        var computed = document.defaultView.getComputedStyle(element, '');
+        const computed = document.defaultView.getComputedStyle(element, '');
         return element.style[styleName] || computed ? computed[styleName] : null;
     } catch(e) {
         return element.style[styleName];
@@ -87,4 +87,48 @@ export function warnProp(component, prop, correctType, wrongType) {
     correctType = firstUpperCase(correctType);
     wrongType = firstUpperCase(wrongType);
     console.error(`[iView warn]: Invalid prop: type check failed for prop ${prop}. Expected ${correctType}, got ${wrongType}. (found in component: ${component})`);
-}
+}
+
+function typeOf(obj) {
+    const toString = Object.prototype.toString;
+    const map = {
+        '[object Boolean]'  : 'boolean',
+        '[object Number]'   : 'number',
+        '[object String]'   : 'string',
+        '[object Function]' : 'function',
+        '[object Array]'    : 'array',
+        '[object Date]'     : 'date',
+        '[object RegExp]'   : 'regExp',
+        '[object Undefined]': 'undefined',
+        '[object Null]'     : 'null',
+        '[object Object]'   : 'object'
+    };
+    return map[toString.call(obj)];
+}
+
+// deepCopy
+function deepCopy(data) {
+    const t = typeOf(data);
+    let o;
+
+    if (t === 'array') {
+        o = [];
+    } else if ( t === 'object') {
+        o = {};
+    } else {
+        return data;
+    }
+
+    if (t === 'array') {
+        for (let i = 0; i < data.length; i++) {
+            o.push(deepCopy(data[i]));
+        }
+    } else if ( t === 'object') {
+        for (let i in data) {
+            o[i] = deepCopy(data[i]);
+        }
+    }
+    return o;
+}
+
+export {deepCopy}

test/routers/table.vue

@@ -1,6 +1,10 @@
 <template>
     <div>
-        <i-table :columns="columns" :data="data"></i-table>
+        <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
+        <br>
+        <i-table border :columns="columns" :data="data" @on-current-change="current" @on-select="select" @on-selection-change="schange" @on-select-all="sall"></i-table>
+        <br>
+        <!--<i-table size="small" border stripe :columns="columns" :data="data"></i-table>-->
     </div>
 </template>
 <script>
@@ -11,16 +15,20 @@
         data () {
             return {
                 columns: [
+                    {
+                        type: 'selection',
+                        width: 50
+                    },
                     {
                         title: '姓名',
                         key: 'name',
-                        fixed: 'left',
+                        align: 'left',
 //                        width: 100
                     },
                     {
                         title: '年龄',
                         key: 'age',
-                        fixed: 'right',
+                        align: 'right',
 //                        width: 100
 //                        render (row) {
 //                            return `<i-button>${row.age}</i-button>`
@@ -29,7 +37,7 @@
                     {
                         title: '地址',
                         key: 'address',
-                        fixed: 'center',
+                        align: 'center',
 //                        width: 100
 //                        render (row, column, index) {
 //                            if (row.edit) {
@@ -65,7 +73,13 @@
                         name: '刘天娇',
                         age: 27,
                         address: '北京市东城区',
-                        edit: true
+                        edit: false
+                    },
+                    {
+                        name: '胡国伟',
+                        age: 28,
+                        address: '北京市西城区',
+                        edit: false
                     }
                 ]
             }
@@ -78,12 +92,27 @@
                 this.$Message.info(name);
             },
             edit (index) {
-                this.data[index].edit = true;
+//                this.data[index].edit = true;
+                this.$Message.info(this.data[index].name);
+            },
+            current (newData, oldData) {
+                console.log(newData);
+                console.log(oldData);
+            },
+            select (a,b){
+                console.log(a);
+                console.log(b);
+            },
+            schange (a) {
+                console.log(a)
+            },
+            sall (a) {
+                console.log(a)
             }
         },
         ready () {
             setTimeout(() => {
-                return;
+//                return
                 this.data.push({
                     name: '刘天娇2',
                     age: 272,