点击某个自定义按钮，实现表格数据刷新？

Question

let PortData = reactive({
  tableData: [], // 列表数据
  lanPortId: '',// 网络端口输出id
  NetworkCard: '',// 网卡--右上文字
  IpAddress: '',// IP地址--右上文字
  Port: ''// 端口--右上文字
})
onMounted(() => {
  nextTick(() => {
    GetSerID();
  })
})
// 先进行 获取端口数据量的请求，查询到对应的id，然后再讲id传递给getInitialTableData函数通过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 >= '21' && formattedPortId <= '24') {//只显示0x21-0x24的数据
        acc.push({
          portId: formattedPortId,
          rate,
          thruput,
        });
      }
    }
    return acc;
  }, []);
  for (const item of result) {
    // 将“端口数据量”接口获取到的id传递给GetPacketHeaderFreq函数,以便于获取报文头频率数据
    await GetPacketHeaderFreq(item.portId)
  }
}
// 获取报文头频率数据
async function GetPacketHeaderFreq(id: any) {
  const data = { port_id: parseInt(id, 16) }
  const OutCfgList = await api.GetPortOut(data);
  const { data: res } = OutCfgList;
  const portId = res.port_id.toString(16).padStart(2, '0');
  const formattedFrequency = Object.entries(res)
    .filter(([key, value]) => key.endsWith('_freq') && value !== 0)
    .map(([key, value]) => `${key.replace('_freq', '').toUpperCase()}/${value}`)
    .join('; ');
  // 如果报文/频率为空，则执行变为使能按钮，并且隐藏掉编辑框语句
  if (formattedFrequency === '') {
    buttonText.value = '使能'
    iconVisible.value = false
  } else {
    buttonText.value = '禁止'
    iconVisible.value = true
  }
  const forma = ''
  if (portId >= '21' && portId <= '24') {//只显示0x21-0x24的数据
    await getInitialTableData(id, formattedFrequency)// 调用获取表格数据函数，传入端口数据量的id和报文/频率参数
  } else {
    await getInitialTableData(id, forma)//未在此范围就不传递报文/频率参数
  }
}
//获取列表中其他的数据（网络端口id，端口使能，类型,连接状态......）
async function getInitialTableData(id: any, formattedFrequency: string) {
  // 这里的id是端口数据量接口传递过来的(16进制的11转为10进制发送)
  const data = { lan_port_id: parseInt(id, 16) }
  const GetTableData = await api.GetLanPortCfg(data)
  const { data: res } = GetTableData
  //  判断是否需要添加到表格中   
  if (previousId.value.includes(res.lan_port_id)) {
    return;
  }
  previousId.value.push(res.lan_port_id);
  const portId = res.lan_port_id.toString(16).padStart(2, '0');
  //根据返回的连接状态，再表格内是否显示“连接”还是“断开”按钮
  if (res.state === false) {
    ConnectState.value = true
  } else {
    ConnectState.value = false
  }
  // 如果portId返回的不在0x21和0x24 之间就不显示
  if (portId >= '21' && portId <= '24') {
    const tableData = [
      {
        lan_port_id: res.lan_port_id.toString(16).padStart(2, '0'),//16===>10  id
        network_card: '有线',//网卡
        en: res.en, //端口使能
        type: res.type,//类型
        dst_ip: res.dst_ip,//目标ip
        port: res.port,//端口号
        formattedFrequency: formattedFrequency, // 添加formattedFrequency属性
        state: res.state//连接状态
      }
    ];
    // console.log('lan口列表数据源', tableData);
    PortData.tableData = [...PortData.tableData, ...tableData];
  }
}
// 点击保存按钮，实现表格数据的更新
async function save() {
  const data = {
    port_id: Number(sessionStorage.getItem('lanPortId')),
    state: 1,
    kcn_freq: Number(INS.input_kcn),
    inspva_freq: Number(INS.input_inspva),
    inspvax_freq: Number(INS.input_inspvax),
    bestpos_freq: Number(INS.input_bestpos),
    gga_freq: Number(GNSS.input_gga),
    rmc_freq: Number(GNSS.input_rmc),
    dop_freq: Number(GNSS.input_dop),
    gsa_freq: Number(GNSS.input_gsa),
    gsv_freq: Number(GNSS.input_gsv),
    heading_freq: Number(GNSS.input_heading),
    zda_freq: Number(GNSS.input_zda),
    gst_freq: Number(GNSS.input_gst),
    rawimu_freq: Number(RAW.input_rawimu),
    imudataa_freq: Number(RAW.input_imudataa),
    sta_freq: Number(OTHER.input_sta),
    dev_freq: Number(OTHER.input_dev),
  }
  const SetData = await api.SetPortOut(data)
  const { data: res } = SetData
  if (res.error_code === 0) {
    await GetSerID();//初始化列表
    return ElMessage({ message: res.msg, type: 'success', showClose: true })
  } else {
    return ElMessage({ message: res.msg, type: 'error', showClose: true })
  }
}

我根据上面代码，在点击保存按钮，save()内，调用GetSerID()函数来初始化列表来达到列表数据更新，但是没反应？麻烦各位大佬们帮忙看看，谢谢~

Answer 1

提几个问题

1. 你在 save 之后再获取列表时并没有将原有的列表置空，而是直接往里面填数据，这样是否会造成数据重复
2. PortData.tableData = [...PortData.tableData, ...tableData] 可以改成 PortData.tableData.push(...tableData)