From 87b6ef9d8ba27daad950f8dcdaae36d45f6da8ec Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Thu, 4 May 2017 12:05:29 +0800
Subject: [PATCH] Table support real Render function to render Cell

---
 examples/routers/table.vue    | 31 ++++++++++++++++++++++++++-----
 src/components/table/cell.vue | 81 +++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------
 2 files changed, 75 insertions(+), 37 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 42247dd..0dc7340 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <Table border :context="self" :columns="columns7" :data="data6"></Table>
-        <abc></abc>
+        <Table border :columns="columns7" :data="data6"></Table>
+        <Button @click="handleAdd"> + 1</Button>
     </div>
 </template>
 <script>
@@ -10,13 +10,23 @@
         components: { abc },
         data () {
             return {
-                self: this,
+                data1: 1,
+//                self: this,
                 columns7: [
                     {
                         title: '姓名',
                         key: 'name',
-                        render (row, column, index) {
-                            return `<abc></abc>`;
+//                        render (row, column, index) {
+//                            return `<abc></abc>`;
+//                        }
+                        render: (h, row, column, index) => {
+                            return h('div', [
+                                h('Button',{
+                                    on: {
+                                        click: this.handleClick
+                                    }
+                                }, 'hello')
+                            ])
                         }
                     },
                     {
@@ -61,6 +71,11 @@
                 ]
             }
         },
+        computed: {
+            ttt () {
+                return this.data1 + 1;
+            }
+        },
         methods: {
             show (index) {
                 this.$Modal.info({
@@ -70,6 +85,12 @@
             },
             remove (index) {
                 this.data6.splice(index, 1);
+            },
+            handleAdd () {
+                this.data1++;
+            },
+            handleClick () {
+                this.$Message.info('111')
             }
         }
     }
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 94bcfb4..d731a79 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -48,42 +48,59 @@
         methods: {
             compile () {
                 if (this.column.render) {
-                    const $parent = this.context;
-                    const template = this.column.render(this.row, this.column, this.index);
-                    const cell = document.createElement('div');
-                    cell.innerHTML = template;
+                    // 兼容真 Render，后期废弃旧用法
+                    let isRealRender = false;
+                    try {
+                        this.column.render(this.row, this.column, this.index);
+                    }
+                    catch (err) {
+                        isRealRender = true;
+                    }
 
-                    this.$el.innerHTML = '';
-                    let methods = {};
-                    Object.keys($parent).forEach(key => {
-                        const func = $parent[key];
-                        if (typeof(func) === 'function' && (func.name  === 'boundFn' || func.name === 'n')) {
-                            methods[key] = func;
-                        }
-                    });
-                    const res = Vue.compile(cell.outerHTML);
-                    // todo 临时解决方案
+                    if (isRealRender) {
+                        const component = new Vue({
+                            render: (h) => {
+                                return this.column.render(h, this.row, this.column, this.index);
+                            }
+                        });
+                        const Cell = component.$mount();
+                        this.$refs.cell.appendChild(Cell.$el);
+                    } else {
+                        const $parent = this.context;
+                        const template = this.column.render(this.row, this.column, this.index);
+                        const cell = document.createElement('div');
+                        cell.innerHTML = template;
 
-                    // 获取父组件使用的局部 component
-                    const components = {};
-                    Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
-                        components[item] = $parent.$options.components[item];
-                    });
+                        this.$el.innerHTML = '';
+                        let methods = {};
+                        Object.keys($parent).forEach(key => {
+                            const func = $parent[key];
+                            if (typeof(func) === 'function' && (func.name  === 'boundFn' || func.name === 'n')) {
+                                methods[key] = func;
+                            }
+                        });
+                        const res = Vue.compile(cell.outerHTML);
+                        // 获取父组件使用的局部 component
+                        const components = {};
+                        Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
+                            components[item] = $parent.$options.components[item];
+                        });
 
-                    const component = new Vue({
-                        render: res.render,
-                        staticRenderFns: res.staticRenderFns,
-                        methods: methods,
-                        data () {
-                            return $parent._data;
-                        },
-                        components: components
-                    });
-                    component.row = this.row;
-                    component.column = this.column;
+                        const component = new Vue({
+                            render: res.render,
+                            staticRenderFns: res.staticRenderFns,
+                            methods: methods,
+                            data () {
+                                return $parent._data;
+                            },
+                            components: components
+                        });
+                        component.row = this.row;
+                        component.column = this.column;
 
-                    const Cell = component.$mount();
-                    this.$refs.cell.appendChild(Cell.$el);
+                        const Cell = component.$mount();
+                        this.$refs.cell.appendChild(Cell.$el);
+                    }
                 }
             },
             destroy () {
--
libgit2 0.21.4