update Table

build/webpack.dev.config.js

@@ -27,8 +27,8 @@ module.exports = merge(webpackBaseConfig, {
     resolve: {
         alias: {
             iview: '../../src/index',
-            // vue: 'vue/dist/vue.esm.js'
+            vue: 'vue/dist/vue.esm.js'
-            vue: 'vue/dist/vue.runtime.js'
+            // vue: 'vue/dist/vue.runtime.js'
         }
     },
     plugins: [

examples/components/test.vue

@@ -1,8 +1,16 @@
 <template>
-    <div>123</div>
+    <div>{{ row.name }}</div>
 </template>
 <script>
     export default {
-
+        props: {
+            row: Object
+        },
+        mounted () {
+            console.log(1);
+        },
+        beforeDestroy () {
+            console.log(2);
+        }
     }
 </script>

examples/routers/table.vue

@@ -1,36 +1,28 @@
 <template>
-    <Table border :columns="columns7" :data="data6" @on-expand="expand"></Table>
+    <Table border :columns="columns5" :data="data5"></Table>
 </template>
 <script>
-    import TableExpand from '../components/tableExpand.vue';
     import etable from '../components/table.vue';
+    import test from '../components/test.vue';
     export default {
-        components: { etable },
         data () {
             return {
-                columns7: [
+                columns5: [
                     {
                         type: 'expand',
-                        width: 50,
+                        render: (h) => {
-                        render: (h, params) => {
+                            return h(etable);
-//                            return h(etable);
+                        },
-//                            return h('div', params.row.name)
+                        width: 50
-                            return h(TableExpand, { props: { name: params.row.name } })
+                    },
-                        }
+                    {
+                        title: '日期',
+                        key: 'date',
+                        sortable: true
                     },
                     {
                         title: '姓名',
-                        key: 'name',
+                        key: 'name'
-                        render: (h, params) => {
-                            return h('div', [
-                                h('Icon', {
-                                    props: {
-                                        type: 'person'
-                                    }
-                                }),
-                                h('strong', params.row.name)
-                            ]);
-                        }
                     },
                     {
                         title: '年龄',
@@ -43,80 +35,43 @@
                     },
                     {
                         title: '操作',
-                        key: 'action',
+                        key: 'name',
-                        width: 150,
-                        align: 'center',
                         render: (h, params) => {
-                            return h('div', [
+                            return h(test, {
-                                h('Button', {
                                 props: {
-                                        type: 'primary',
+                                    row: params.row
-                                        size: 'small'
-                                    },
-                                    style: {
-                                        marginRight: '5px'
-                                    },
-                                    on: {
-                                        click: () => {
-                                            this.show(params.index)
                                 }
-                                    }
+                            });
-                                }, '查看'),
-                                h('Button', {
-                                    props: {
-                                        type: 'error',
-                                        size: 'small'
-                                    },
-                                    on: {
-                                        click: () => {
-                                            this.remove(params.index)
-                                        }
-                                    }
-                                }, '删除')
-                            ]);
                         }
                     }
                 ],
-                data6: [
+                data5: [
                     {
                         name: '王小明',
                         age: 18,
-                        address: '北京市朝阳区芍药居'
+                        address: '北京市朝阳区芍药居',
+                        date: '2016-10-03'
                     },
                     {
                         name: '张小刚',
                         age: 25,
                         address: '北京市海淀区西二旗',
-                        _disableExpand: true
+                        date: '2016-10-01'
                     },
                     {
                         name: '李小红',
                         age: 30,
                         address: '上海市浦东新区世纪大道',
-                        _expanded: true
+                        date: '2016-10-02'
                     },
                     {
                         name: '周小伟',
                         age: 26,
-                        address: '深圳市南山区深南大道'
+                        address: '深圳市南山区深南大道',
-                    }
+                        date: '2016-10-04'
+                    },
                 ]
             }
-        },
-        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>

src/components/table/cell.vue

@@ -10,17 +10,24 @@
                 <Icon type="ios-arrow-right"></Icon>
             </div>
         </template>
+        <Cell
+            v-if="renderType === 'render'"
+            :row="row"
+            :column="column"
+            :index="index"
+            :render="column.render"></Cell>
     </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',
-        components: { Icon, Checkbox },
+        components: { Icon, Checkbox, Cell },
         props: {
             prefixCls: String,
             row: Object,
@@ -65,25 +72,25 @@
         methods: {
             compile () {
                 if (this.column.render && this.renderType === 'render') {
-                    // 兼容真 Render，后期废弃旧用法
+                    // todo 兼容真 Render，后期废弃旧用法
                     let isRealRender = true;
                     const Table = findComponentUpward(this, 'Table');
                     if (Table.context) isRealRender = false;
 
                     if (isRealRender) {
-                        this.$el.innerHTML = '';
+//                        this.$el.innerHTML = '';
-                        const component = new Vue({
+//                        const component = new Vue({
-                            functional: true,
+//                            functional: true,
-                            render: (h) => {
+//                            render: (h) => {
-                                return this.column.render(h, {
+//                                return this.column.render(h, {
-                                    row: this.row,
+//                                    row: this.row,
-                                    column: this.column,
+//                                    column: this.column,
-                                    index: this.index
+//                                    index: this.index
-                                });
+//                                });
-                            }
+//                            }
-                        });
+//                        });
-                        const Cell = component.$mount();
+//                        const Cell = component.$mount();
-                        this.$refs.cell.appendChild(Cell.$el);
+//                        this.$refs.cell.appendChild(Cell.$el);
                     } else {
                         const $parent = this.context;
                         const template = this.column.render(this.row, this.column, this.index);

src/components/table/expand.js

@@ -6,8 +6,17 @@ export default {
         row: Object,
         render: Function,
         index: Number,
+        column: {
+            type: Object,
+            default: null
+        }
     },
     render: (h, ctx) => {
-        return ctx.props.render(h, {row: ctx.props.row, index: ctx.props.index});
+        const params = {
+            row: ctx.props.row,
+            index: ctx.props.index
+        };
+        if (ctx.props.column) params.column = ctx.props.column;
+        return ctx.props.render(h, params);
     }
 };

src/components/table/table-body.vue

@@ -6,7 +6,6 @@
         <tbody :class="[prefixCls + '-tbody']">
             <template v-for="(row, index) in data">
                 <tr
-                    :key="row"
                     :class="rowClasses(row._index)"
                     @mouseenter.stop="handleMouseIn(row._index)"
                     @mouseleave.stop="handleMouseOut(row._index)"
@@ -17,6 +16,7 @@
                             :fixed="fixed"
                             :prefix-cls="prefixCls"
                             :row="row"
+                            :key="row"
                             :column="column"
                             :natural-index="index"
                             :index="row._index"
@@ -28,7 +28,7 @@
                 </tr>
                 <tr v-if="rowExpanded(row._index)">
                     <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
-                        <Expand :row="row" :render="expandRender" :index="row._index"></Expand>
+                        <Expand :key="row" :row="row" :render="expandRender" :index="row._index"></Expand>
                     </td>
                 </tr>
             </template>