Table support render local component #775

梁灏
1 parent 01b8d340
Showing 3 changed files with 47 additions and 64 deletions Show diff stats
examples/components/test.vue
examples/routers/table.vue
src/components/table/cell.vue
+<template>
+    <div>123</div>
+</template>
+<script>
+    export default {
+
+    }
+</script>
 \ No newline at end of file
 <template>
     <div>
-        <Table :height="height" border :columns="columns1" :data="data2"></Table>
-        <Button @click="height=800">change height</Button>
+        <Table border :context="self" :columns="columns7" :data="data6"></Table>
+        <abc></abc>
     </div>
 </template>
 <script>
+    import abc from '../components/test.vue';
     export default {
+        components: { abc },
         data () {
             return {
-                height: 200,
-                columns1: [
+                self: this,
+                columns7: [
                     {
                         title: '姓名',
-                        key: 'name'
+                        key: 'name',
+                        render (row, column, index) {
+                            return `<abc></abc>`;
+                        }
                     },
                     {
                         title: '年龄',
-                        key: 'age',
-                        filters:[
-                            {
-                                label: '小学',
-                                value: '小学'
-                            },
-                            {
-                                label: '中学',
-                                value: '大学'
-                            },
-                            {
-                                label: '中学',
-                                value: '中学'
-                            }
-                        ],
-                        filterRemote:function(value,key,column){
-                            var that = this;
-                            this.$Notice.open({title:`正在远程过滤${key}`,desc:value,duration:3,onClose:function(){
-                                that.remoteFilter(value,key,column)
-                            }})
-                            
-                        }
+                        key: 'age'
                     },
                     {
                         title: '地址',
                         key: 'address'
-                    }
-                ],
-                data2: [
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
                     },
                     {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗'
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道'
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道'
-                    },
+                        title: '操作',
+                        key: 'action',
+                        width: 150,
+                        align: 'center',
+                        render (row, column, index) {
+                            return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
+                        }
+                    }
+                ],
+                data6: [
                     {
                         name: '王小明',
                         age: 18,
@@ -87,22 +60,16 @@
                     }
                 ]
             }
-
         },
-        methods:{
-            remoteFilter:function(val,age,column){
-                this.data1 = [
-                       {
-                        name: '模拟1',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
-                    },
-                    {
-                        name: '模拟2',
-                        age: 25,
-                        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);
             }
         }
     }
@@ -63,13 +63,21 @@
                     });
                     const res = Vue.compile(cell.outerHTML);
                     // todo 临时解决方案
+
+                    // 获取父组件使用的局部 component
+                    const components = {};
+                    Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
+                        components[item] = $parent.$options.components[item];
+                    });
+
                     const component = new Vue({
                         render: res.render,
                         staticRenderFns: res.staticRenderFns,
                         methods: methods,
                         data () {
                             return $parent._data;
-                        }
+                        },
+                        components: components
                     });
                     component.row = this.row;
                     component.column = this.column;