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

站长

2024年06月23日 10:09 · 阅读数 5

  <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给替换掉？

问题二、下面这是第二个接口返回的数据，如何实现一个表格内调用两个接口来渲染不同字段数据？但是需要在列表内这样显示，这是要求显示的格式请问该如何修改？求大佬们指点指点，谢谢

1个回答

test

2024-06-23

// 获取初始的列表数据----获取串口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,
          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;
  });
}

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容