<el-table :data="SerialForm.tableData" border width="80%" style="width: 99%;" max-height="200">
<el-table-column prop="portId" label="串口输出接口id" width="180" align="center" />
<el-table-column prop="formattedFrequency" label="报文/频率" align="center" />
<el-table-column label="编辑" width="180" align="center">
<template #default="{ row }">
<el-icon color="red" size="25" @click="edit(row)">
<Edit />
</el-icon>
</template>
</el-table-column>
</el-table>
<script>
let SerialForm = reactive({
tableData: [], // 列表数据
})
onMounted(() => {
GetSerID()//获取初始的列表数据----获取串口id
})
// 获取初始的列表数据----获取串口id
async function GetSerID() {
const SerIDList = await api.GetSerialId();
const { data: res } = SerIDList;
const result = res.port_thruput.split(",").reduce((acc, curr, index, array) => {
if (index % 3 === 0) {
const [portId, rate, thruput] = array.slice(index, index + 3);
const formattedPortId = parseInt(portId).toString(16).padStart(2, '0');
if (formattedPortId >= '01' && formattedPortId <= '04') {//只显示01~03的串口数据
acc.push({
portId: formattedPortId,
rate,
thruput
});
}
}
return acc;
}, []);
SerialForm.tableData = result;
for (const item of result) {
// 获取初始的列表数据----获取报文头和频率
await GetPacketHeaderFreq(item.portId);
}
}
// 获取初始的列表数据----获取报文头和频率
async function GetPacketHeaderFreq(portId) {
const id = {
port_id: parseInt(portId, 10)
}
const OutCfgList = await api.GetMsgRate(id);
const { data: res } = OutCfgList;
let formatted = [];
for (const key in res) {
const message = key.toUpperCase();
const frequency = res[key];
formatted.push({
formattedFrequency: `${message}/${frequency}`
});
}
SerialForm.tableData = formatted;
}
</script>
问题一、当"串口输出id"和"报文/频率" 。分别需要两个接口来获取对应的数据,第一个接口是获取id的接口,第二个接口是需要将id传值给第二接口才会返回"报文/频率"的内容,请问大佬们我该如何才能实现获取两个不同的接口数据在el-table内显示呢?
我试着将两个接口分别不同的请求,来获取不同的字段数据,但是第二个接口返回的数据渲染在表格里,会把第一个返回的id给替换掉?
问题二、下面这是第二个接口返回的数据,
但是需要在列表内这样显示,这是要求显示的格式
请问该如何修改?求大佬们指点指点,谢谢