-

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 {