vue v-for输出表格结构

转载于 2017-10-18 17:22:00 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #数据库 #数据结构与算法 #ViewUI

本文介绍如何使用v-for指令在Vue.js中动态生成表格结构。通过定义字段数组和数据数组，可以实现表头和内容行的循环展示。示例展示了如何绑定数据到表格单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'}，{...}] //值 }