element-ui動態生成表格。表頭的名字不一樣

官網的是這樣的。接口數據是已知的：日期，姓名，地址

所以可以直接寫label。prop的寫死

 

如果表頭數據是動態的不一定的。

我們應該怎麼寫呢？下面是接口給的表格的數據

可以觀察看出來我們如果使用循環。就是循環el-table-column

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>  在這個裏面寫循環。並且prop和label都變成動態的。那麼我們就得知道表頭參數名
    </el-table>

this.tableData=res.tablebase;//用一個變量接收接口給的數據。

然後把參數也就是表頭的內容全部取出來。

this.tableheader=this.tableData.map(res=>{

  return Object.keys(res);//取出對應的鍵名

})

然後知道這兩個變量就可以實現循環了。

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column  v-for="item in  tableheader " :key="item"
        :prop="item"
        :label="item">
      </el-table-column>  在這個裏面寫循環。並且prop和label都變成動態的。那麼我們就得知道表頭參數名
    </el-table>