首页 > 其他 > 详细

vue v-for输出表格结构

时间:2017-10-18 17:29:18      阅读:541      评论:0      收藏:0      [点我收藏+]

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输出表格结构

原文:http://www.cnblogs.com/wangyihong/p/7687803.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!