Merge pull request #1111 from ckryo/2.0

更改tableexpand实现方式，修复expand - bug

Merge pull request #1111 from ckryo/2.0
更改tableexpand实现方式，修复expand - bug
Aresn · GitHub
2 parents b8adf5cf 718e773f
Showing 5 changed files with 33 additions and 39 deletions Show diff stats
examples/components/tableExpand.vue
examples/routers/table.vue
src/components/table/expand.js
src/components/table/expand.vue
src/components/table/table-body.vue
+<template>
+    <div>{{ name }}</div>
+</template>
+<script>
+    export default {
+        props: {
+            name: String
+        },
+        created () {
+            console.log(this.name + ': 被创建');
+        },
+        destroyed () {
+            console.log(this.name + ': 被销毁');
+        }
+    }
+</script>
 \ No newline at end of file
@@ -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 } })
                         }
                     },
                     {
+
+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});
+    }
+};
 \ No newline at end of file
-<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>
 \ No newline at end of file
@@ -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 {