From 486d4fda19c7b473b6cd08126a3805a28a4e833f Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Thu, 9 Mar 2017 14:11:22 +0800
Subject: [PATCH] update Table

---
 README.md                           |  2 +-
 examples/app.vue                    |  1 +
 examples/main.js                    |  4 ++++
 examples/routers/table.vue          | 87 +++++++++++++++++++++++++++++++++++++++------------------------------------------------
 src/components/table/cell.vue       | 40 ++++++++++++++++++++++++++++++++--------
 src/components/table/table-body.vue |  9 +++++----
 src/components/table/table-head.vue | 31 ++++++++++++++++---------------
 src/components/table/table.vue      | 61 ++++++++++++++++++++++++++++++++-----------------------------
 src/index.js                        |  3 ++-
 9 files changed, 132 insertions(+), 106 deletions(-)

diff --git a/README.md b/README.md
index b1d1bc8..614f562 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@
 - [x] Radio
 - [x] Checkbox
 - [x] Switch
-- [ ] Table
+- [x] Table
 - [x] Select
 - [x] Slider
 - [x] DatePicker
diff --git a/examples/app.vue b/examples/app.vue
index 60183fa..71fb03c 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -49,6 +49,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/transfer">Transfer</router-link></li>
                 <li><router-link to="/date">Date</router-link></li>
                 <li><router-link to="/form">Form</router-link></li>
+                <li><router-link to="/table">Table</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/examples/main.js b/examples/main.js
index 99f0870..af7ad53 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -161,6 +161,10 @@ const router = new VueRouter({
             path: '/form',
             component: require('./routers/form.vue')
         },
+        {
+            path: '/table',
+            component: require('./routers/table.vue')
+        },
     ]
 });
 
diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index cb8f082..382a612 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,96 +1,87 @@
 <template>
-    <i-table highlight-row border :content="self" :columns="columns7" :data="data6"></i-table>
+    <Table width="550" border :columns="columns2" :data="data3"></Table>
 </template>
 <script>
     export default {
         data () {
             return {
-                self: this,
-                columns7: [
-                    {
-                        type: 'selection',
-                        width: 60,
-                        align: 'center'
-                    },
+                columns2: [
                     {
                         title: '姓名',
                         key: 'name',
-                        render (row, column, index) {
-                            return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
-                        }
+                        width: 100,
+                        fixed: 'left'
                     },
                     {
                         title: '年龄',
                         key: 'age',
-                        sortable: true,
-                        sortMethod: function (a, b, type) {
-                            if (type === 'asc') {
-                                return a < b ? 1 : -1;
-                            } else if (type === 'desc') {
-                                return a > b ? 1 : -1;
-                            }
-                        }
+                        width: 100
+                    },
+                    {
+                        title: '省份',
+                        key: 'province',
+                        width: 100
+                    },
+                    {
+                        title: '市区',
+                        key: 'city',
+                        width: 100
                     },
                     {
                         title: '地址',
-                        key: 'address'
+                        key: 'address',
+                        width: 200
+                    },
+                    {
+                        title: '邮编',
+                        key: 'zip',
+                        width: 100
                     },
                     {
                         title: '操作',
                         key: 'action',
-                        width: 150,
-                        align: 'center',
-                        render (row, column, index) {
-//                            return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
-                            return `<Poptip width="250" confirm placement="left" title="您确认删除吗？" @on-ok="deleteProject(${index})">
-                <i-button size="small" type="error">删除</i-button>
-              </Poptip>`
+                        fixed: 'right',
+                        width: 120,
+                        render () {
+                            return `<Button type="text" size="small">查看</Button><Button type="text" size="small">编辑</Button>`;
                         }
                     }
                 ],
-                data6: [
+                data3: [
                     {
                         name: '王小明',
                         age: 18,
                         address: '北京市朝阳区芍药居',
-                        _highlight: true,
-                        _checked: true,
-                        _disabled: false
+                        province: '北京市',
+                        city: '朝阳区',
+                        zip: 100000
                     },
                     {
                         name: '张小刚',
                         age: 25,
                         address: '北京市海淀区西二旗',
-                        _checked: false,
-                        _disabled: true
+                        province: '北京市',
+                        city: '海淀区',
+                        zip: 100000
                     },
                     {
                         name: '李小红',
                         age: 30,
                         address: '上海市浦东新区世纪大道',
-                        _checked: true,
-                        _disabled: true
+                        province: '上海市',
+                        city: '浦东新区',
+                        zip: 100000
                     },
                     {
                         name: '周小伟',
                         age: 26,
                         address: '深圳市南山区深南大道',
-                        _checked: false,
-                        _disabled: false
+                        province: '广东',
+                        city: '南山区',
+                        zip: 100000
                     }
                 ]
             }
-        },
-        methods: {
-            show (index) {
-                this.$Modal.info({
-                    title: '用户信息',
-                    content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
-                })
-            },
-            remove (index) {
-                this.data6.splice(index, 1);
-            }
         }
     }
 </script>
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index c866e0e..18b7505 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -2,15 +2,17 @@
     <div :class="classes">
         <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
         <template v-if="renderType === 'selection'">
-            <Checkbox :checked="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
+            <Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
         </template>
-        <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
+        <template v-if="renderType === 'normal'"><span v-html="row[column.key]"></span></template>
     </div>
 </template>
 <script>
+    import Vue from 'vue';
     import Checkbox from '../checkbox/checkbox.vue';
 
     export default {
+        name: 'TableCell',
         components: { Checkbox },
         props: {
             prefixCls: String,
@@ -29,7 +31,7 @@
             return {
                 renderType: '',
                 uid: -1,
-                content: this.$parent.$parent.content
+                content: this.$parent.$parent.currentContent
             };
         },
         computed: {
@@ -51,14 +53,34 @@
                     const cell = document.createElement('div');
                     cell.innerHTML = template;
                     const _oldParentChildLen = $parent.$children.length;
-                    $parent.$compile(cell);    // todo 这里无法触发 ready 钩子
+//                    $parent.$compile(cell);    // todo 这里无法触发 ready 钩子
                     const _newParentChildLen = $parent.$children.length;
 
                     if (_oldParentChildLen !== _newParentChildLen) {    // if render normal html node, do not tag
                         this.uid = $parent.$children[$parent.$children.length - 1]._uid;    // tag it, and delete when data or columns update
                     }
                     this.$el.innerHTML = '';
-                    this.$el.appendChild(cell);
+//                    this.$el.appendChild(cell);
+                    let methods = {};
+                    let $_parent = this.$parent;
+                    while($_parent != null && $_parent._name != '<Table>'){
+                        $_parent = $_parent.$parent;
+                    }
+                    if ($_parent) {
+                        Object.keys($_parent).forEach(key => {
+                            const func = this.$parent.$parent.$parent[`${key}`];
+                            if(typeof(func) === 'function' &&func.name  === 'boundFn'){
+                                methods[`${key}`] = func;
+                            }
+                        });
+                    }
+                    const res = Vue.compile(cell.outerHTML);
+                    const compt = new Vue({
+                        render: res.render,
+                        staticRenderFns: res.staticRenderFns,
+                        methods: methods
+                    });
+                    compt.$mount(this.$el);
                 }
             },
             destroy () {
@@ -73,7 +95,7 @@
                 this.$parent.$parent.toggleSelect(this.index);
             }
         },
-        compiled () {
+        created () {
             if (this.column.type === 'index') {
                 this.renderType = 'index';
             } else if (this.column.type === 'selection') {
@@ -84,8 +106,10 @@
                 this.renderType = 'normal';
             }
         },
-        ready () {
-            this.compile();
+        mounted () {
+            this.$nextTick(() => {
+                this.compile();
+            });
         },
         beforeDestroy () {
             this.destroy();
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index b9b50eb..84d84e7 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -1,11 +1,11 @@
 <template>
-    <table cellspacing="0" cellpadding="0" border="0" :style="style">
+    <table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
         <colgroup>
-            <col v-for="column in columns" :width="setCellWidth(column, $index, false)">
+            <col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
         </colgroup>
         <tbody :class="[prefixCls + '-tbody']">
             <tr
-                v-for="(index, row) in data"
+                v-for="(row, index) in data"
                 :class="rowClasses(row._index)"
                 @mouseenter.stop="handleMouseIn(row._index)"
                 @mouseleave.stop="handleMouseOut(row._index)"
@@ -32,11 +32,12 @@
     import Mixin from './mixin';
 
     export default {
+        name: 'TableBody',
         mixins: [ Mixin ],
         components: { Cell },
         props: {
             prefixCls: String,
-            style: Object,
+            styleObject: Object,
             columns: Array,
             data: Array,    // rebuildData
             objData: Object,
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index e026b90..4ac5465 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -1,43 +1,43 @@
 <template>
     <table cellspacing="0" cellpadding="0" border="0" :style="styles">
         <colgroup>
-            <col v-for="column in columns" :width="setCellWidth(column, $index, true)">
+            <col v-for="(column, index) in columns" :width="setCellWidth(column, index, true)">
         </colgroup>
         <thead>
             <tr>
-                <th v-for="(index, column) in columns" :class="alignCls(column)">
+                <th v-for="(column, index) 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-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
                         <template v-else>
-                            {{{ renderHeader(column, $index) }}}
+                            <span v-html="renderHeader(column, index)"></span>
                             <span :class="[prefixCls + '-sort']" v-if="column.sortable">
-                                <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>
+                                <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="isPopperShow(column)"
-                                :visible.sync="column._filterVisible"
+                                :visible="column._filterVisible"
                                 placement="bottom"
-                                @on-popper-hide="handleFilterHide($index)">
+                                @on-popper-hide="handleFilterHide(index)">
                                 <span :class="[prefixCls + '-filter']">
                                     <i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
                                 </span>
                                 <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
                                     <div :class="[prefixCls + '-filter-list-item']">
-                                        <checkbox-group :model.sync="column._filterChecked">
+                                        <checkbox-group v-model="column._filterChecked">
                                             <checkbox v-for="item in column.filters" :value="item.value">{{ item.label }}</checkbox>
                                         </checkbox-group>
                                     </div>
                                     <div :class="[prefixCls + '-filter-footer']">
-                                        <i-button type="text" size="small" :disabled="!column._filterChecked.length" @click="handleFilter($index)">{{ t('i.table.confirmFilter') }}</i-button>
-                                        <i-button type="text" size="small" @click="handleReset($index)">{{ t('i.table.resetFilter') }}</i-button>
+                                        <i-button type="text" size="small" :disabled="!column._filterChecked.length" @click.native="handleFilter(index)">{{ t('i.table.confirmFilter') }}</i-button>
+                                        <i-button type="text" size="small" @click.native="handleReset(index)">{{ t('i.table.resetFilter') }}</i-button>
                                     </div>
                                 </div>
                                 <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
                                     <ul :class="[prefixCls + '-filter-list-single']">
                                         <li
                                             :class="itemAllClasses(column)"
-                                            @click="handleReset($index)">{{ t('i.table.clearFilter') }}</li>
+                                            @click="handleReset(index)">{{ t('i.table.clearFilter') }}</li>
                                         <li
                                             :class="itemClasses(column, item)"
                                             v-for="item in column.filters"
@@ -61,11 +61,12 @@
     import Locale from '../../mixins/locale';
 
     export default {
+        name: 'TableHead',
         mixins: [ Mixin, Locale ],
         components: { CheckboxGroup, Checkbox, Poptip, iButton },
         props: {
             prefixCls: String,
-            style: Object,
+            styleObject: Object,
             columns: Array,
             objData: Object,
             data: Array,    // rebuildData
@@ -77,8 +78,8 @@
         },
         computed: {
             styles () {
-                const style = Object.assign({}, this.style);
-                const width = this.$parent.bodyHeight === 0 ? parseInt(this.style.width) : parseInt(this.style.width) + this.$parent.scrollBarWidth;
+                const style = Object.assign({}, this.styleObject);
+                const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + this.$parent.scrollBarWidth;
                 style.width = `${width}px`;
                 return style;
             },
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 99c6039..013946e 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -1,22 +1,22 @@
 <template>
     <div :class="wrapClasses" :style="styles">
         <div :class="classes">
-            <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
-            <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
+            <div :class="[prefixCls + '-title']" v-if="showSlotHeader" ref="title"><slot name="header"></slot></div>
+            <div :class="[prefixCls + '-header']" v-if="showHeader" ref="header" @mousewheel="handleMouseWheel">
                 <table-head
                     :prefix-cls="prefixCls"
-                    :style="tableStyle"
+                    :styleObject="tableStyle"
                     :columns="cloneColumns"
                     :obj-data="objData"
                     :columns-width="columnsWidth"
                     :data="rebuildData"></table-head>
             </div>
-            <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"
+            <div :class="[prefixCls + '-body']" :style="bodyStyle" ref="body" @scroll="handleBodyScroll"
                 v-show="!((!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
                 <table-body
-                    v-ref:tbody
+                    ref="tbody"
                     :prefix-cls="prefixCls"
-                    :style="tableStyle"
+                    :styleObject="tableStyle"
                     :columns="cloneColumns"
                     :data="rebuildData"
                     :columns-width="columnsWidth"
@@ -24,12 +24,13 @@
             </div>
             <div
                 :class="[prefixCls + '-tip']"
-                v-else>
+                v-show="((!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
                 <table cellspacing="0" cellpadding="0" border="0">
                     <tbody>
                         <tr>
                             <td :style="{ 'height': bodyStyle.height }">
-                              {{{!data || data.length === 0 ? noDataText : noFilteredDataText}}}
+                                <span v-html="noDataText" v-if="!data || data.length === 0"></span>
+                                <span v-html="noFilteredDataText" v-else></span>
                             </td>
                         </tr>
                     </tbody>
@@ -40,17 +41,17 @@
                     <table-head
                         fixed="left"
                         :prefix-cls="prefixCls"
-                        :style="fixedTableStyle"
+                        :styleObject="fixedTableStyle"
                         :columns="leftFixedColumns"
                         :obj-data="objData"
                         :columns-width.sync="columnsWidth"
                         :data="rebuildData"></table-head>
                 </div>
-                <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
+                <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
                     <table-body
                         fixed="left"
                         :prefix-cls="prefixCls"
-                        :style="fixedTableStyle"
+                        :styleObject="fixedTableStyle"
                         :columns="leftFixedColumns"
                         :data="rebuildData"
                         :columns-width="columnsWidth"
@@ -62,24 +63,24 @@
                     <table-head
                         fixed="right"
                         :prefix-cls="prefixCls"
-                        :style="fixedRightTableStyle"
+                        :styleObject="fixedRightTableStyle"
                         :columns="rightFixedColumns"
                         :obj-data="objData"
-                        :columns-width.sync="columnsWidth"
+                        :columns-width="columnsWidth"
                         :data="rebuildData"></table-head>
                 </div>
-                <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
+                <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody">
                     <table-body
                         fixed="right"
                         :prefix-cls="prefixCls"
-                        :style="fixedRightTableStyle"
+                        :styleObject="fixedRightTableStyle"
                         :columns="rightFixedColumns"
                         :data="rebuildData"
                         :columns-width="columnsWidth"
                         :obj-data="objData"></table-body>
                 </div>
             </div>
-            <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
+            <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div>
         </div>
     </div>
 </template>
@@ -93,6 +94,7 @@
     const prefixCls = 'ivu-table';
 
     export default {
+        name: 'Table',
         components: { tableHead, tableBody },
         props: {
             data: {
@@ -170,7 +172,8 @@
                 showSlotFooter: true,
                 bodyHeight: 0,
                 bodyRealHeight: 0,
-                scrollBarWidth: getScrollBarSize()
+                scrollBarWidth: getScrollBarSize(),
+                currentContent: this.content
             };
         },
         computed: {
@@ -415,9 +418,9 @@
             fixedHeader () {
                 if (this.height) {
                     this.$nextTick(() => {
-                        const titleHeight = parseInt(getStyle(this.$els.title, 'height')) || 0;
-                        const headerHeight = parseInt(getStyle(this.$els.header, 'height')) || 0;
-                        const footerHeight = parseInt(getStyle(this.$els.footer, 'height')) || 0;
+                        const titleHeight = parseInt(getStyle(this.$refs.title, 'height')) || 0;
+                        const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0;
+                        const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0;
                         this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
                     });
                 } else {
@@ -428,14 +431,14 @@
                 this.cloneColumns.forEach((col) => col._filterVisible = false);
             },
             handleBodyScroll (event) {
-                if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft;
-                if (this.isLeftFixed) this.$els.fixedBody.scrollTop = event.target.scrollTop;
-                if (this.isRightFixed) this.$els.fixedRightBody.scrollTop = event.target.scrollTop;
+                if (this.showHeader) this.$refs.header.scrollLeft = event.target.scrollLeft;
+                if (this.isLeftFixed) this.$refs.fixedBody.scrollTop = event.target.scrollTop;
+                if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;
                 this.hideColumnFilter();
             },
             handleMouseWheel (event) {
                 const deltaX = event.deltaX;
-                const $body = this.$els.body;
+                const $body = this.$refs.body;
 
                 if (deltaX > 0) {
                     $body.scrollLeft = $body.scrollLeft + 10;
@@ -639,13 +642,13 @@
                 ExportCsv.download(params.filename, data);
             }
         },
-        compiled () {
-            if (!this.content) this.content = this.$parent;
-            this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
-            this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
+        created () {
+            if (!this.content) this.currentContent = this.$parent;
+            this.showSlotHeader = this.$refs.title !== undefined;
+            this.showSlotFooter = this.$refs.footer !== undefined;
             this.rebuildData = this.makeDataWithSortAndFilter();
         },
-        ready () {
+        mounted () {
             this.handleResize();
             this.fixedHeader();
             this.$nextTick(() => this.ready = true);
diff --git a/src/index.js b/src/index.js
index 5eab2e8..f036886 100644
--- a/src/index.js
+++ b/src/index.js
@@ -33,7 +33,7 @@ import Slider from './components/slider';
 import Spin from './components/spin';
 import Steps from './components/steps';
 import Switch from './components/switch';
-// import Table from './components/table';
+import Table from './components/table';
 import Tabs from './components/tabs';
 import Tag from './components/tag';
 import Timeline from './components/timeline';
@@ -100,6 +100,7 @@ const iview = {
     Steps,
     iSwitch: Switch,
     // iTable: Table,
+    Table,
     Tabs: Tabs,
     TabPane: Tabs.Pane,
     Tag,
--
libgit2 0.21.4