From d0e206c501029b2b9889eb317f02bd772814e40d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 1 Dec 2016 11:02:06 +0800
Subject: [PATCH] Table add content prop to compile custom component

Table add content prop to compile custom component
---
 src/components/table/cell.vue       |  7 +++--
 src/components/table/table-head.vue |  2 +-
 src/components/table/table.vue      | 34 +++++++++++---------
 test/routers/table.vue              | 48 +++++++++++++++++++----------
 4 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index fa668920..ab92b721 100644
--- a/src/components/table/cell.vue
+++ b/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();
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 8e9ce554..9b603441 100644
--- a/src/components/table/table-head.vue
+++ b/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>
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 2a7d5ca4..eb9574ea 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -122,6 +122,9 @@
                 default () {
                     return '';
                 }
+            },
+            content: {
+                type: Object
             }
         },
         data () {
@@ -243,23 +246,25 @@
                         let autoWidthIndex = -1;
                         if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题
 
-                        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];
+                        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];
 
-                            let width = parseInt(getStyle($td[i], 'width'));
-                            if (i === autoWidthIndex) {
-                                width = parseInt(getStyle($td[i], 'width')) - 1;
-                            }
-                            if (column.width) width = column.width;
-
-                            this.cloneColumns[i]._width = width;
-
-                            columnsWidth[column._index] = {
-                                width: width
+                                let width = parseInt(getStyle($td[i], 'width'));
+                                if (i === autoWidthIndex) {
+                                    width = parseInt(getStyle($td[i], 'width')) - 1;
+                                }
+                                if (column.width) width = column.width;
+
+                                this.cloneColumns[i]._width = width;
+
+                                columnsWidth[column._index] = {
+                                    width: width
+                                }
                             }
+                            this.columnsWidth = columnsWidth;
                         }
-                        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();
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 9cde164a..06bfb507 100644
--- a/test/routers/table.vue
+++ b/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: '姓名',
-                        key: 'name'
-                    },
-                    {
-                        title: '年龄',
-                        key: 'age',
-                        fixed: 'left',
-//                        width: 200
-                    },
-                    {
-                        title: '地址',
-                        key: 'address'
+                        title: '操作',
+                        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>`;
+                        }
                     }
                 ],
-                data1: [
+                data6: [
                     {
                         name: '王小明',
                         age: 18,
@@ -44,6 +55,11 @@
                     }
                 ]
             }
+        },
+        methods: {
+            remove (index) {
+                this.data6.splice(index, 1);
+            }
         }
     }
-</script>
\ No newline at end of file
+</script>