當前位置:成語大全網 - 新華字典 - element ui如何動態渲染表格

element ui如何動態渲染表格

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

解決辦法:

1 <!-- 表格 --> 2 <el-table 3 id="out-table" 4 :data="tabeldata" 5 style="width: 100%;" 6 tooltip-effect="dark" 7 stripe 8 border10 >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-column22 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 }