Table add content prop to compile custom component

Table add content prop to compile custom component

src/components/table/cell.vue

@@ -27,7 +27,8 @@
         data () {
             return {
                 renderType: '',
-                uid: -1
+                uid: -1,
+                content: this.$parent.$parent.content
             }
         },
         computed: {
@@ -43,7 +44,7 @@
         methods: {
             compile () {
                 if (this.column.render) {
-                    const $parent = this.$parent.$parent.$parent;
+                    const $parent = this.content;
                     const template = this.column.render(this.row, this.column, this.index);
                     const cell = document.createElement('div');
                     cell.innerHTML = template;
@@ -59,7 +60,7 @@
                 }
             },
             destroy () {
-                const $parent = this.$parent.$parent.$parent;
+                const $parent = this.content;
                 for (let i = 0; i < $parent.$children.length; i++) {
                     if ($parent.$children[i]._uid === this.uid) {
                         $parent.$children[i].$destroy();

src/components/table/table-head.vue

@@ -34,7 +34,7 @@
                                     </div>
                                 </div>
                                 <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
-                                    <ul>
+                                    <ul :class="[prefixCls + '-filter-list-single']">
                                         <li
                                             :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.length}]"
                                             @click="handleReset($index)">全部</li>

src/components/table/table.vue

@@ -122,6 +122,9 @@
                 default () {
                     return '';
                 }
+            },
+            content: {
+                type: Object
             }
         },
         data () {
@@ -243,6 +246,7 @@
                         let autoWidthIndex = -1;
                         if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题
 
+                        if (this.data.length) {
                             const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
                             for (let i = 0; i < $td.length; i++) {    // can not use forEach in Firefox
                                 const column = this.cloneColumns[i];
@@ -260,6 +264,7 @@
                                 }
                             }
                             this.columnsWidth = columnsWidth;
+                        }
                     });
                 });
             },
@@ -502,6 +507,7 @@
             }
         },
         compiled () {
+            if (!this.content) this.content = this.$parent;
             this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
             this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
             this.rebuildData = this.makeDataWithSortAndFilter();

test/routers/table.vue

@@ -1,27 +1,38 @@
 <template>
-    <i-table border :columns="columns1" :data="data1"></i-table>
+    <Card>
+        <i-table :content="self" border :columns="columns7" :data="data6"></i-table>
+    </Card>
 </template>
 <script>
     export default {
         data () {
             return {
-                columns1: [
+                self: this,
+                columns7: [
+//                    {
+//                        title: '姓名',
+//                        key: 'name',
+//                        render (row, column, index) {
+//                            return `<strong>${row.name}</strong>`;
+//                        }
+//                    },
+//                    {
+//                        title: '年龄',
+//                        key: 'age'
+//                    },
+//                    {
+//                        title: '地址',
+//                        key: 'address'
+//                    },
                     {
-                        title: '姓名',
+                        title: '操作',
-                        key: 'name'
+                        key: 'action',
-                    },
+                        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>`;
-                        title: '年龄',
+                        }
-                        key: 'age',
-                        fixed: 'left',
-//                        width: 200
-                    },
-                    {
-                        title: '地址',
-                        key: 'address'
                     }
                 ],
-                data1: [
+                data6: [
                     {
                         name: '王小明',
                         age: 18,
@@ -44,6 +55,11 @@
                     }
                 ]
             }
+        },
+        methods: {
+            remove (index) {
+                this.data6.splice(index, 1);
+            }
         }
     }
 </script>