由于后端接口设计历史遗留问题,要求在一个接口中,通过他返回的数据去请求其他接口,数据以表格的形式渲染出来
目录
总结
前言
首先进入页面请求列表的数据。点击“展开”会用列表接口返回的参数去请求步骤条的接口。由于表格组件的步骤条只能渲染最新的一条数据,导致点开第二条数据的“展开”按钮,步骤条的数据会覆盖第一条。所以这里想了两个办法:
提示:以下是本篇文章正文内容,下面案例可供参考
一、每次仅展示一个步骤图
<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一次步骤图的数据。