commit Table component

commit Table component

test/app.vue

@@ -41,6 +41,7 @@ li + li {
                 <li><a v-link="'/input'">Input</a></li>
                 <li><a v-link="'/cascader'">Cascader</a></li>
                 <li><a v-link="'/transfer'">Transfer</a></li>
+                <li><a v-link="'/table'">Table</a></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -102,6 +102,11 @@ router.map({
         component: function (resolve) {
             require(['./routers/transfer.vue'], resolve);
         }
+    },
+    '/table': {
+        component: function (resolve) {
+            require(['./routers/table.vue'], resolve);
+        }
     }
 });
 

test/routers/table.vue

@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <i-table :columns="columns" :data="data"></i-table>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+        
+        },
+        data () {
+            return {
+                columns: [
+                    {
+                        title: '姓名',
+                        key: 'name'
+                    },
+                    {
+                        title: '年龄',
+                        key: 'age',
+//                        render (row) {
+//                            return `<i-button>${row.age}</i-button>`
+//                        }
+                    },
+                    {
+                        title: '地址',
+                        key: 'address',
+//                        render (row, column, index) {
+//                            if (row.edit) {
+//                                return `<i-input :value.sync="data[${index}].name"></i-input>`;
+//                            } else {
+//                                return `<Tooltip content="${row.address}"><i-button @click="show(${index})">${row.name}</i-button></Tooltip>`;
+//                            }
+//                        }
+                    },
+                    {
+                        title: '操作',
+                        key: 'action',
+                        render (row, column, index) {
+                            return `<i-button @click="edit(${index})">编辑</i-button>`
+                        }
+                    }
+                ],
+                data: [
+                    {
+                        name: '梁灏',
+                        age: 25,
+                        address: '北京市朝阳区',
+                        edit: false
+                    },
+                    {
+                        name: '段模',
+                        age: 26,
+                        address: '北京市海淀区',
+                        edit: false
+                    },
+                    {
+                        name: '刘天娇',
+                        age: 27,
+                        address: '北京市东城区',
+                        edit: true
+                    }
+                ]
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+            show (name) {
+                this.$Message.info(name);
+            },
+            edit (index) {
+                this.data[index].edit = true;
+            }
+        },
+        ready () {
+            setTimeout(() => {
+                this.data.push({
+                    name: '刘天娇2',
+                    age: 272,
+                    address: '北京市东城区2',
+                    edit: false
+                });
+            }, 1000);
+        }
+    }
+</script>