记录一次接口套娃数据处理

由于后端接口设计历史遗留问题，要求在一个接口中，通过他返回的数据去请求其他接口，数据以表格的形式渲染出来

目录

前言

一、每次仅展示一个步骤图

二、整合接口数据，一次性渲染

1.请求步骤条接口的地方对数据进行处理

2.修改步骤图渲染数据逻辑

三、接口返回数据格式

1.列表接口

2.步骤图接口

总结​​​​​​​

---

前言

首先进入页面请求列表的数据。点击“展开”会用列表接口返回的参数去请求步骤条的接口。由于表格组件的步骤条只能渲染最新的一条数据，导致点开第二条数据的“展开”按钮，步骤条的数据会覆盖第一条。所以这里想了两个办法：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、每次仅展示一个步骤图

  <el-table
          :data="tableData"
          border
          fit
          @expand-change="seeDetailBtn"
          :row-key='getRowKeys'
          :expand-row-keys="expands"
          :header-cell-style="{ background: '#f6f6fa', textAlign: 'center' }"
        >

核心是这两句

        :row-key="getRowKeys"
        :expand-row-keys="expands"

    seeDetailBtn(row, expandedRows) {
      if (expandedRows.length) {
        this.expands = [];
        if (row) {
          this.expands.push(row.ID);
        }
      } else {
        this.expands = [];
      }
    },
    getRowKeys(row) {
      return row.ID;
    },

二、整合接口数据，一次性渲染

1.请求步骤条接口的地方对数据进行处理​​​​​​​

    progress(row) {
      this.columns1 = {};
      progress(this.queryParams2).then((response) => {
        //遍历列表数据
        for (let index = 0; index < this.tableData.length; index++) {
          //当点击表格行的ID与接口返回数据条目的ID相同时，把步骤条的数据赋给对应索引的条目中
          if (row.ID === this.tableData[index].ID) {
            this.tableData[index]["columns1"] = response.data.records;
          }
        }
        //临时创建一个数组，用来存放最终渲染到列表中的数据
        let list = new Array();
        //遍历列表数据，把每一个条目中的‘columns1’push到list中
        this.tableData.forEach((element) => {
          list.push(element.columns1 || {});
        });
        //此时的list应该是所有‘columns1’的集合
        this.columns1 = list;
      });
    },

​​​​​​​

2.修改步骤图渲染数据逻辑

        <el-table-column type="expand" width="60px">
          <template slot-scope="props">
            <div style="width:100%;overflow:scroll">
              <el-steps :active="2" align-center style="margin: 20px 154px;">
                <el-step
                  :title="item.EVENT"
                  v-for="item in columns1[props.$index]"
                  :description="item.TIME"
                  :key="item.ID"
                  style="min-width:150px"
                ></el-step>
              </el-steps>
            </div>
          </template>
        </el-table-column>

通过props取出对应索引的数据

v-for="item in columns1[props.$index]"

三、接口返回数据格式

1.列表接口

{
  "total": 0,
  "code": 200,
  "msg": "操作成功",
  "data": {   
    "records": [
      {
        "ID": "YDZY2080ea498b2f",
        "BUSSNO": "3000102004481625",
        "BANK": "中国银行",
        "TRANSMONEY": "50.00",
        "TRANSSTATUS": "支付成功",
      },
      
    ],
    "status": "SUCCESS",
    "statusCode": "000000"
  }
}

2.步骤图接口

{
  "total": 0,
  "code": 200,
  "msg": "操作成功",
  "data": {
    "records": [
      {
        "EVENT": "收银台接收",
        "TIME": "2022-12-06 14:37:56",
        "RN": "1"
      },
      {
        "EVENT": "发送第三方",
        "TIME": "2022-12-06 14:37:59",
        "RN": "2"
      },
      {
        "EVENT": "第三方返回",
        "TIME": "2022-12-06 14:37:59",
        "RN": "3"
      },
      {
        "EVENT": "返回业务端",
        "TIME": "2022-12-06 14:37:59",
        "RN": "4"
      }
    ],
    "status": "SUCCESS",
    "statusCode": "000000"
  }
}

---

总结

主要是方法二对步骤图数据的添加，每点击一次，push一次步骤图的数据。