vue v-for输出表格结构

v-for输出表格结构

数据库结构如下:

vue   v-for输出表格结构

原理: 两个数组 a, b,  数组a的值,是数组b的键(索引), 变量拼接(红色区域);

<table>
<tr>
<th v-for='item in columnList'>{{item.column_name}}</th> //表头循环表的字段
</tr>
<tr v-for='item in inforList'>
<td v-for='it in columnList'>{{item[it.column_name]}}</td> //循环字段对应的值
</tr>
</table>
//数据结构模拟
new Vue({
el: '#app',
data: {
columnList: ['userId', 'userName', 'userTel', 'userEmail', 'userMessage', 'inTime'], //字段
inforList: [{'userId': '2', 'userName': '大华', 'userTel': '12345678', 'userEmail': null, 'userMessage': '哈哈’,'inTime': '2017-10-17 17:07:03'},{...}] //值 }
    })

效果图:

vue   v-for输出表格结构

上一篇:Spring两种实现AOP的方式


下一篇:【转载】Win10系统怎么清空剪切板?Win10系统清空剪切板的方法