在ReactJs中如何将获取到的剩余金额数据动态插入表格

根据你使用的技术栈，参考对应实现方式即可：

原生JavaScript实现 #

• 新增表头列

const headerRow = document.querySelector('table thead tr')
const remainHeader = document.createElement('th')
remainHeader.innerText = '剩余金额'
headerRow.appendChild(remainHeader)

• 填充行数据

// remainAmountList 为你已获取到的剩余金额数组，顺序和表格行顺序一致
const dataRows = document.querySelectorAll('table tbody tr')
dataRows.forEach((row, idx) => {
  const amountCell = document.createElement('td')
  // 金额可按需格式化，比如保留两位小数、加货币符号
  amountCell.innerText = remainAmountList[idx]
  row.appendChild(amountCell)
})

Vue 实现 #

• 新增表头配置：

tableColumns: [
  // 原有其他列配置
  { prop: 'remainAmount', label: '剩余金额' }
]

• 给表格数据源赋值即可自动更新视图：

// tableData 为表格绑定的数据源
this.tableData.forEach((item, idx) => {
  item.remainAmount = remainAmountList[idx]
})

React 实现 #

• 新增表头配置：

const columns = [
  // 原有其他列配置
  { title: '剩余金额', dataIndex: 'remainAmount' }
]

• 更新表格数据源触发重渲染：

setTableData(prev => prev.map((item, idx) => ({
  ...item,
  remainAmount: remainAmountList[idx]
})))

内容的提问来源于stack exchange，提问作者Omkar Joshi