后端接口返回数组嵌套数组，前台使用el-table循环表头展示

*小雪

已于 2024-01-02 16:55:39 修改

阅读量788

点赞数 16

文章标签： vue.js javascript elementui

于 2024-01-02 16:52:50 首次发布

本文链接：https://blog.csdn.net/qq_34568657/article/details/135344591

版权

最近写项目接口全是展示实时数据、历史数据比较多
后端给我返回的接口是数组嵌套数组，如下图
在这里插入图片描述
还有一个因子表头接口返回的数组如下图

代码如下
首先处理因子表头

getYinzi() {
      this.$axios.get(`SysBase/GetWzFactors`).then((res) => {
        const { result } = res.data;
        this.tableHd = [];
        result.forEach((element) => {
          this.tableHd.push({
            prop: element.onfId + "Rtd",
            label: element.onfReName
              ?  `${element.onfReName} (${element.onfUnit?element.onfUnit:''})` 
              : `${element.onfName} (${element.onfUnit?element.onfUnit:''})` ,
          });
        });
        console.log(this.tableHd, "this.tableHd");
      });
    },

this.tableHd打印出来是
在这里插入图片描述
在处理后端接口数据

getTableData() {
    this.$axios.get(`SailMonitor/GetWzRealDatas`).then((res) => {
       const { result } = res.data;
       let newData = result.map((item) => {
         let result = {
           sName: item.sName,
           sGuid: item.sGuid,
           rDatetime: item.rDatetime ? item.rDatetime.replace("T", " ") : "",
         };
         item.realDatas.forEach((dataItem) => {
           if (dataItem.RDataValue) {
             result[dataItem.OnfId + dataItem.RDataType] = dataItem.RDataValue;
           }
         });
         return result;
       });
       console.log(newData,'newData')
       this.tableData = newData;
     });
   },

newData打印出来是
在这里插入图片描述
最后把
newData赋值给tableData，
在html中循环的是

<el-table-column
 v-for="(detail, index) in tableHd"
     :key="index"
     :label="detail.label"
     :prop="detail.prop"
     align="center"
   >
</el-table-column>

在这里插入图片描述
这样就可以了~
效果展示