element-ui表格el-table根据接口返回参数动态生成表头和数据(行+列)

log:

背景:前端表格根据接口返回的参数进行动态生成行和列

前端:vue+elementUI

举例：接口返回参数：

[
  {
    "created": "Thu, 04 Mar 2021 14:27:29 GMT", 
    "id": 39, 
    "service_id": 25, 
    "version": "V1.0.0"
  }, 
  {
    "created": "Thu, 04 Mar 2021 16:45:45 GMT", 
    "id": 40, 
    "service_id": 27, 
    "version": "V1.0.0"
  }, 
  {
    "created": "Fri, 05 Mar 2021 11:03:56 GMT", 
    "id": 41, 
    "service_id": 28, 
    "version": "V1.0.0"
  }, 
  {
    "created": "Fri, 05 Mar 2021 15:14:17 GMT", 
    "id": 42, 
    "service_id": 26, 
    "version": "1.0.0"
  }
]
 

表格参数说明： 

el-table-column 

  :prop关联的是表头的值 

  :label关联的是表头的文本

titleData: 这里就是表头数据[{value: 'platcode', label: "平台"}]

tableColumns： 表格数据[{platcode: '平台A'}， {platcode: '平台B'}，  {platcode: '平台C'}]

<el-table :data="tableColumns" style="width: 100%">

     <el-table-column v-for="(item,key) in titleData" :key="key" :prop="item.value"

      :label="item.label"></el-table-column>

</el-table>

参数对应关系：

代码如下：

<el-row :gutter="15">
   <el-col :span="24">
      <el-table class="tableClass" :data="formData.result" border height='350' width='500'>
          <el-table-column v-for="key in formData.listkey" :key="key" :prop="key"
                :label="key"></el-table-column>
          </el-table>
    </el-col>
</el-row>





data() {
    return {
      formData: {
        result: [],
        listkey:[],
      },
        }
methods: {
    batchSql(){
      this.formData.listkey=[]
      this.formData.result=[]
      let reSql = this.formData.sql.split("\n");
      let prot = parseInt(this.formData.prot)
      this.$axios
      .post('/batchSql/',
      { "workspaceEnv":"rests",
        "tenant":this.formData.tenant,
        "dblink":{"host":this.formData.host,"port":prot,"user":this.formData.user,"password":this.formData.password,"database":this.formData.database},
        "sql":reSql,
        "operate":this.formData.operate
        })
        .then((res)=>{
          this.formData.result =res.data 
          //提取表头字段====
          for (let i = 0, l = this.formData.result.length; i < l; i++) {
            for (let key in this.formData.result[i]) {
              if (this.formData.listkey.indexOf(key)==-1){
                  this.formData.listkey.push(key)
              }else{
                console.log("============xxxx===========")
              }
            }
          }
        console.log(this.formData.listkey,"==============",this.formData.result);   
        })
    }, 
}
}

实现效果:

效果一

效果二