1. 程式人生 > 實用技巧 >Element UI使用表格動態渲染資料

Element UI使用表格動態渲染資料

json資料多層巢狀如何實現渲染

例如:我們表頭需要第一層的datetime和data下面的屬性

解決辦法:

 1 <!-- 表格 -->
 2     <el-table
 3       id="out-table"
 4       :data="tabeldata"
 5       style="width: 100%;"
 6       tooltip-effect="dark"
 7       stripe
 8       border
10     >
13       <el-table-column prop="datetime" label
="日期" fixed> 14 <template slot-scope="scope"> 15 <!-- scope.row.datetime表示獲取tabeldata下每一行的也就是每一項中datetime的資料 --> 16 <span>{{ scope.row.datetime }}</span> 17 </template> 18 </el-table-column> 19 <!-- 詳細資訊 --> 20 <!--
tableHead就是獲取的第二層data資料的屬性,也就是表頭 --> 21 <el-table-column 22 v-for="(item, index) in tableHead" 23 :label="item" 24 :key="index" 25 > 26 <template slot-scope="scope"> 27 <!-- scope.row.data[item]表示獲取tabeldata下每一行的也就是每一項中屬性為data[屬性]
--> 28 {{ scope.row.data[item] }} 29 </template> 30 </el-table-column> 31 </el-table>

其中,日期是固定的每個表都有,所以我們可以直接寫;而剩下的表頭,是第二層data資料下面的,通過動態渲染

怎麼獲取第二層data下每一項的屬性,也就是頭

 1 //獲取data資料,放入tableData1中
 2  $.each(result.data, function (index, element) {
 3             tableData1.push(result.data[index].data);
 4           });
 5            // 獲取表頭,通過雙層巢狀獲取json資料的第二層的屬性
 6           for (var i in tableData1) {
 7             var header = [];
 8             for (var j in tableData1[i]) {
 9               header.push(j);
10             }
11           }