merge

Lawrence Lee
2 parents 6ef8d853 297f74ea
Showing 5 changed files with 152 additions and 38 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
+<template>
+    <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 },
+        data () {
+            return {
+                columns7: [
+                    {
+                        type: 'expand',
+                        width: 50,
+                        render: (h, params) => {
+//                            return h(etable);
+//                            return h('div', params.row.name)
+                            return h(TableExpand, { props: { name: params.row.name } })
+                        }
+                    },
+                    {
+                        title: '姓名',
+                        key: 'name',
+                        render: (h, params) => {
+                            return h('div', [
+                                h('Icon', {
+                                    props: {
+                                        type: 'person'
+                                    }
+                                }),
+                                h('strong', params.row.name)
+                            ]);
+                        }
+                    },
+                    {
+                        title: '年龄',
+                        key: 'age',
+                        sortable: true
+                    },
+                    {
+                        title: '地址',
+                        key: 'address'
+                    },
+                    {
+                        title: '操作',
+                        key: 'action',
+                        width: 150,
+                        align: 'center',
+                        render: (h, params) => {
+                            return h('div', [
+                                h('Button', {
+                                    props: {
+                                        type: 'primary',
+                                        size: 'small'
+                                    },
+                                    style: {
+                                        marginRight: '5px'
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.show(params.index)
+                                        }
+                                    }
+                                }, '查看'),
+                                h('Button', {
+                                    props: {
+                                        type: 'error',
+                                        size: 'small'
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.remove(params.index)
+                                        }
+                                    }
+                                }, '删除')
+                            ]);
+                        }
+                    }
+                ],
+                data6: [
+                    {
+                        name: '王小明',
+                        age: 18,
+                        address: '北京市朝阳区芍药居'
+                    },
+                    {
+                        name: '张小刚',
+                        age: 25,
+                        address: '北京市海淀区西二旗',
+                        _disableExpand: true
+                    },
+                    {
+                        name: '李小红',
+                        age: 30,
+                        address: '上海市浦东新区世纪大道',
+                        _expanded: true
+                    },
+                    {
+                        name: '周小伟',
+                        age: 26,
+                        address: '深圳市南山区深南大道'
+                    }
+                ]
+            }
+        },
+        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);
+            },
+            expand (row, s) {
+//                console.log(row);
+//                console.log(s);
+            }
+        }
+    }
+</script>
+
+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 {