Vue的动态表格Demo

一、导入Vue的js(这一步就不演示了)

二、创建Vue的对象、并且添加测试数据

　　注：el挂载的标签ID,components的myTable表示的是，在页面引入时的标签，tabletest为绑定的模板ID(后面会添加),props作为一个数组类型，里面的参数为页面引用时动态的参数（即为子组件传数据所用）。

<script type="text/javascript">
        var vue = new Vue({
            el: "#app",
            data: {
                persons: [{"name": "张三","age": 19}, 
                          {"name": "张三","age": 20}, 
                          {"name": "张三","age": 21},
                          ],
                person2:[{"name":"诸葛亮","age":1900,"birthday":"181年","sex":"男"},
                {"name":"貂蝉","age":1900,"birthday":"190年","sex":"女"},
                {"name":"刘备","age":1920,"birthday":"161年","sex":"男"},
                {"name":"周瑜","age":1930,"birthday":"161年","sex":"男"},
                ]
            },
            components: {
                myTable: {
                    template: "#tabletest",
                    props: ["persons"]
                }
            }
        })
 </script>

三、创建一个Vue的模板

　　注：template标签下面有且只能有一个根标签。第5行的v-for用于动态输出列名、第7行循环每一个person对象、第9行输出对象所有的值

<template id="tabletest">
            <table>
                <tr>
                    <td>num</td>
                    <td v-for="(value,key) in persons[0]">{{key}}</td>
                </tr>
                <tr v-for="(p,index) in persons">
                    <td>{{index+1}}</td>
                    <td v-for="value in p">{{value}}</td>
                </tr>
            </table>
 </template>

四、测试代码

<div id="app">
            <my-table :persons="persons"></my-table>
            <my-table :persons="person2"></my-table>
</div>

注：表格的数据通过 :persons属性 动态选择（此属性在components已经定义好）

五、整体代码布局

　

 六、测试结果

　　

 最后：有什么不对的地方，恳请各位斧正。谢谢！