vue2 对象中遍历对象 并动态展示数据

要求实现的效果

后端返回的数据

思路：

detectCategoryCount 中的字段数据是动态的，无法确认它里面到底会出现多少条，可以使用for循环来解决：

// 先判断list是否有数据
if (data.length > 0){
// 遍历
  data.map((item) => {
     let keyList = []
     for(let key in item.detectCategoryCount){
// 将对象中的key值遍历出来进行保存
           keyList.push(key)
          }
        keyList.forEach((item33) => {
 // 保存后再把数据放到外面来
           item[item33] = item.detectCategoryCount[item33]
// 储存会出现的表头
           this.titleList.push(item33)
          })
     })
}
// 每条数据可能会出出现相同的数据，所以要去重
 this.titleList = [...new Set(this.titleList)]

<el-table :data="tableData">
         ...
                <el-table-column v-for="(item) in titleList" :label="item" align="center">
                    <template v-slot="scope">
                        <el-button type="text" size="mini" 
                            @click="checkData(scope.row,item)">
                        {{scope.row[item]}}    
                    </el-button>
                    </template>
                </el-table-column>

            </el-table>

根据titleList中的表头数据进行for循环遍历出来 label就是该表头 prop 使用模板字符串 获取当前行的数据来获取 scope.row[item] 就是当前行的对象 例如截图中的 地下水、废气