javascript - 如何实现一个表格内调用两个接口来渲染不同字段数据？

Question

  <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})// 获取初始的列表数据----获取串口idasync 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给替换掉？

问题二、下面这是第二个接口返回的数据，

但是需要在列表内这样显示，这是要求显示的格式

请问该如何修改？求大佬们指点指点，谢谢

Answer 1

// 获取初始的列表数据----获取串口idasync 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,          formattedFrequency: [] // 添加一个空的报文/频率字段        });      }    }    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;  // 删除不需要的字段  delete res.state;  delete res.port_id;  let filteredData = Object.entries(res)    .filter(([_, value]) => value !== 0)    .map(([key, value]) => ({ key, value }));  let formatted = filteredData.map(({ key, value }) => `${key.replace('_FREQ', '').toUpperCase()}/${value}`);  // 将得到的报文/频率字段合并到之前的表格数据中  SerialForm.tableData = SerialForm.tableData.map(item => {    if (item.portId === portId) {      return {        ...item,        formattedFrequency: formatted.join('; ')      };    }    return item;  });}