vue v-for輸出表格結構

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

　　　　})

效果圖：