Table support expand

examples/routers/table.vue

@@ -1,21 +1,33 @@
 <template>
-    <Table border :columns="columns5" :data="data5"></Table>
+    <Table :columns="columns7" :data="data6" @on-expand="expand"></Table>
 </template>
 <script>
+    import etable from '../components/table.vue';
     export default {
+        components: { etable },
         data () {
             return {
-                columns5: [
+                columns7: [
                     {
-                        title: '日期',
-                        key: 'date',
-                        sortable: true
+                        type: 'expand',
+                        width: 50,
+                        render: (h, params) => {
+//                            return h(etable);
+                            return h('div', params.row.name)
+                        }
                     },
                     {
                         title: '姓名',
                         key: 'name',
                         render: (h, params) => {
-                            return h('div', params.row.name);
+                            return h('div', [
+                                h('Icon', {
+                                    props: {
+                                        type: 'person'
+                                    }
+                                }),
+                                h('strong', params.row.name)
+                            ]);
                         }
                     },
                     {
@@ -26,23 +38,81 @@
                     {
                         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)
+                                        }
+                                    }
+                                }, '删除')
+                            ]);
+                        }
                     }
                 ],
-                data5: [
+                data6: [
                     {
                         name: '王小明',
                         age: 18,
-                        address: '北京市朝阳区芍药居',
-                        date: '2016-10-03'
+                        address: '北京市朝阳区芍药居'
                     },
                     {
                         name: '张小刚',
                         age: 25,
-                        address: '北京市海淀区西二旗',
-                        date: '2016-10-01'
+                        address: '北京市海淀区西二旗'
+                    },
+                    {
+                        name: '李小红',
+                        age: 30,
+                        address: '上海市浦东新区世纪大道'
+                    },
+                    {
+                        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>