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

最新推荐文章于 2025-04-09 16:08:29 发布

万物可测

最新推荐文章于 2025-04-09 16:08:29 发布

阅读量8.7k

点赞数 6

分类专栏：测试开发

本文链接：https://blog.csdn.net/qq_38915739/article/details/114675314

版权

测试开发专栏收录该内容

21 篇文章

订阅专栏

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);   
        })
    }, 
}
}

实现效果:

效果一

效果二