Element UI使用表格動態渲染數據

json數據多層嵌套如何實現渲染

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

解決辦法：

<!-- 表格 -->
    <el-table
      id="out-table"
      :data="tabeldata"
      style="width: 100%;"
      tooltip-effect="dark"
      stripe
      border
    >
      <el-table-column prop="datetime" label="日期" fixed>
        <template slot-scope="scope">
          <!-- scope.row.datetime表示獲取tabeldata下每一行的也就是每一項中datetime的數據 -->
          <span>{{ scope.row.datetime }}</span>
        </template>
      </el-table-column>
      <!-- 詳細信息 -->
      <!-- tableHead就是獲取的第二層data數據的屬性，也就是表頭 -->
      <el-table-column
        v-for="(item, index) in tableHead"
        :label="item"
        :key="index"
      >
        <template slot-scope="scope">
          <!-- scope.row.data[item]表示獲取tabeldata下每一行的也就是每一項中屬性為data[屬性] -->
          {{ scope.row.data[item] }}
        </template>
      </el-table-column>
    </el-table>

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

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

//獲取data數據，放入tableData1中
 $.each(result.data, function (index, element) {
            tableData1.push(result.data[index].data);
          });
           // 獲取表頭，通過雙層嵌套獲取json數據的第二層的屬性
          for (var i in tableData1) {
            var header = [];
            for (var j in tableData1[i]) {
              header.push(j);
            }
          }