fixed #1195

fixed #1195 and abandon old Table render function

fixed #1195
fixed #1195 and abandon old Table render function
Aresn
1 parent 4f576611
Showing 4 changed files with 45 additions and 105 deletions Show diff stats
examples/routers/table.vue
src/components/table/cell.vue
src/components/table/table-body.vue
src/components/table/table-tr.vue
@@ -11,6 +11,7 @@
                     {
                         type: 'expand',
                         render: (h) => {
+                            console.log('______hover______');
                             return h(etable);
                         },
                         width: 50
@@ -19,11 +19,9 @@
     </div>
 </template>
 <script>
-    import Vue from 'vue';
     import Cell from './expand';
     import Icon from '../icon/icon.vue';
     import Checkbox from '../checkbox/checkbox.vue';
-    import { findComponentUpward } from '../../utils/assist';
     export default {
         name: 'TableCell',
@@ -46,7 +44,7 @@
             return {
                 renderType: '',
                 uid: -1,
-                context: this.$parent.$parent.currentContext
+                context: this.$parent.$parent.$parent.currentContext
             };
         },
         computed: {
@@ -70,76 +68,11 @@
             }
         },
         methods: {
-            compile () {
-                if (this.column.render && this.renderType === 'render') {
-                    // todo 兼容真 Render，后期废弃旧用法
-                    let isRealRender = true;
-                    const Table = findComponentUpward(this, 'Table');
-                    if (Table.context) isRealRender = false;
-
-                    if (isRealRender) {
-//                        this.$el.innerHTML = '';
-//                        const component = new Vue({
-//                            functional: true,
-//                            render: (h) => {
-//                                return this.column.render(h, {
-//                                    row: this.row,
-//                                    column: this.column,
-//                                    index: this.index
-//                                });
-//                            }
-//                        });
-//                        const Cell = component.$mount();
-//                        this.$refs.cell.appendChild(Cell.$el);
-                    } else {
-                        const $parent = this.context;
-                        const template = this.column.render(this.row, this.column, this.index);
-                        const cell = document.createElement('div');
-                        cell.innerHTML = template;
-
-                        this.$el.innerHTML = '';
-                        let methods = {};
-                        Object.keys($parent).forEach(key => {
-                            const func = $parent[key];
-                            if (typeof(func) === 'function' && (func.name  === 'boundFn' || func.name === 'n')) {
-                                methods[key] = func;
-                            }
-                        });
-                        const res = Vue.compile(cell.outerHTML);
-                        // 获取父组件使用的局部 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
-                        });
-                        if ($parent.$store != undefined) {
-                            component.$store = $parent.$store;
-                        }
-                        component.row = this.row;
-                        component.column = this.column;
-
-                        const Cell = component.$mount();
-                        this.$refs.cell.appendChild(Cell.$el);
-                    }
-                }
-            },
-            destroy () {
-
-            },
             toggleSelect () {
-                this.$parent.$parent.toggleSelect(this.index);
+                this.$parent.$parent.$parent.toggleSelect(this.index);
             },
             toggleExpand () {
-                this.$parent.$parent.toggleExpand(this.index);
+                this.$parent.$parent.$parent.toggleExpand(this.index);
             }
         },
         created () {
@@ -154,20 +87,6 @@
             } else {
                 this.renderType = 'normal';
             }
-        },
-        mounted () {
-            this.$nextTick(() => {
-                this.compile();
-            });
-        },
-        beforeDestroy () {
-            this.destroy();
-        },
-        watch: {
-            naturalIndex () {
-                this.destroy();
-                this.compile();
-            }
         }
     };
 </script>
@@ -5,12 +5,13 @@
         </colgroup>
         <tbody :class="[prefixCls + '-tbody']">
             <template v-for="(row, index) in data">
-                <tr
-                    :class="rowClasses(row._index)"
-                    @mouseenter.stop="handleMouseIn(row._index)"
-                    @mouseleave.stop="handleMouseOut(row._index)"
-                    @click.stop="clickCurrentRow(row._index)"
-                    @dblclick.stop="dblclickCurrentRow(row._index)">
+                <table-tr
+                    :row="row"
+                    :prefix-cls="prefixCls"
+                    @mouseenter.native.stop="handleMouseIn(row._index)"
+                    @mouseleave.native.stop="handleMouseOut(row._index)"
+                    @click.native.stop="clickCurrentRow(row._index)"
+                    @dblclick.native.stop="dblclickCurrentRow(row._index)">
                     <td v-for="column in columns" :class="alignCls(column, row)">
                         <Cell
                             :fixed="fixed"
@@ -25,7 +26,7 @@
                             :expanded="rowExpanded(row._index)"
                         ></Cell>
                     </td>
-                </tr>
+                </table-tr>
                 <tr v-if="rowExpanded(row._index)">
                     <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
                         <Expand :key="row" :row="row" :render="expandRender" :index="row._index"></Expand>
@@ -37,6 +38,7 @@
 </template>
 <script>
     // todo :key="row"
+    import TableTr from './table-tr.vue';
     import Cell from './cell.vue';
     import Expand from './expand.js';
     import Mixin from './mixin';
@@ -44,7 +46,7 @@
     export default {
         name: 'TableBody',
         mixins: [ Mixin ],
-        components: { Cell, Expand },
+        components: { Cell, Expand, TableTr },
         props: {
             prefixCls: String,
             styleObject: Object,
@@ -72,16 +74,6 @@
             }
         },
         methods: {
-            rowClasses (_index) {
-                return [
-                    `${this.prefixCls}-row`,
-                    this.rowClsName(_index),
-                    {
-                        [`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
-                        [`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
-                    }
-                ];
-            },
             rowChecked (_index) {
                 return this.objData[_index] && this.objData[_index]._isChecked;
             },
@@ -91,9 +83,6 @@
             rowExpanded(_index){
                 return this.objData[_index] && this.objData[_index]._isExpanded;
             },
-            rowClsName (_index) {
-                return this.$parent.rowClassName(this.objData[_index], _index);
-            },
             handleMouseIn (_index) {
                 this.$parent.handleMouseIn(_index);
             },
+<template>
+    <tr :class="rowClasses(row._index)"><slot></slot></tr>
+</template>
+<script>
+    export default {
+        props: {
+            row: Object,
+            prefixCls: String
+        },
+        computed: {
+            objData () {
+                return this.$parent.objData;
+            }
+        },
+        methods: {
+            rowClasses (_index) {
+                return [
+                    `${this.prefixCls}-row`,
+                    this.rowClsName(_index),
+                    {
+                        [`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
+                        [`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
+                    }
+                ];
+            },
+            rowClsName (_index) {
+                return this.$parent.$parent.rowClassName(this.objData[_index], _index);
+            },
+        }
+    };
+</script>
 \ No newline at end of file