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

目录

前言

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

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

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

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

三、接口返回数据格式

1.列表接口

2.步骤图接口

总结​​​​​​​

前言

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

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

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

核心是这两句

        :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.修改步骤图渲染数据逻辑

通过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一次步骤图的数据。