-

examples/components/tableExpand.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>{{ name }}</div>
+</template>
+<script>
+    export default {
+        props: {
+            name: String
+        },
+        created () {
+            console.log(this.name + ': 被创建');
+        },
+        destroyed () {
+            console.log(this.name + ': 被销毁');
+        }
+    }
+</script>

examples/routers/table.vue

@@ -2,6 +2,7 @@
     <Table border :columns="columns7" :data="data6" @on-expand="expand"></Table>
 </template>
 <script>
+    import TableExpand from '../components/tableExpand.vue';
     import etable from '../components/table.vue';
     export default {
         components: { etable },
@@ -13,7 +14,8 @@
                         width: 50,
                         render: (h, params) => {
 //                            return h(etable);
-                            return h('div', params.row.name)
+//                            return h('div', params.row.name)
+                            return h(TableExpand, { props: { name: params.row.name } })
                         }
                     },
                     {

src/components/table/expand.js

@@ -0,0 +1,13 @@
+
+export default {
+    name: 'TableExpand',
+    functional: true,
+    props: {
+        row: Object,
+        render: Function,
+        index: Number,
+    },
+    render: (h, ctx) => {
+        return ctx.props.render(h, {row: ctx.props.row, index: ctx.props.index});
+    }
+};

src/components/table/expand.vue

@@ -1,37 +0,0 @@
-<template>
-    <div ref="cell"></div>
-</template>
-<script>
-    import Vue from 'vue';
-    export default {
-        name: 'TableExpand',
-        props: {
-            row: Object,
-            render: Function,
-            index: Number,
-        },
-        methods: {
-            compile () {
-                if (this.render) {
-                    this.$el.innerHTML = '';
-                    const component = new Vue({
-                        functional: true,
-                        render: (h) => {
-                            return this.render(h, {
-                                row: this.row,
-                                index: this.index
-                            });
-                        }
-                    });
-                    const Cell = component.$mount();
-                    this.$refs.cell.appendChild(Cell.$el);
-                }
-            }
-        },
-        mounted () {
-            this.$nextTick(() => {
-                this.compile();
-            });
-        }
-    };
-</script>

src/components/table/table-body.vue

@@ -38,7 +38,7 @@
 <script>
     // todo :key="row"
     import Cell from './cell.vue';
-    import Expand from './expand.vue';
+    import Expand from './expand.js';
     import Mixin from './mixin';
 
     export default {