ant-degisn的数字输入框的使用和表格的价格计算

最新推荐文章于 2023-08-14 16:59:45 发布

我坑我承认

最新推荐文章于 2023-08-14 16:59:45 发布

阅读量1.4k

点赞数

文章标签： react ant-design数字输入框的使用 ant-design表格价格的计算

本文链接：https://blog.youkuaiyun.com/qq_38262910/article/details/91908021

版权

本文介绍了在React项目中使用Ant Design的数字输入框实现表格内的价格计算和限制输入数值范围。详细讲解了如何处理从后台获取的数据格式，以及在数字输入框值变化时动态更新表格总价的方法。通过设置`parser`监听输入框值的变化，确保输入始终为1-99的数字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

1.最近在项目中需要用表格计算价格，所以需要用到ant-design中的数字输入框。如下图

这里有两个表格，我需要实现的是

1.表格内价格的计算和总价格的计算

2.数字输入框只能输入1-99的数字，不能输入中文。

实现

1.数据格式。

这里从后台返回的数据格式是这样的。

[
 [{parts_messages: [{parts_price,amount,vendor_oe}, 
    {parts_price,amount,vendor_oe}]
  },{seller_messages: [{seller_name}]}
 ],

 [{parts_messages},{seller_messages}]
]

2.我需要的是对数字输入框增加或减少时，表格的金额小记和总金额都更新

const columns = [{
  title: '数量', key: 'count',align:'center',render: (text,record,index) =>
  <InputNumber onChange={this.changeCount.bind(this, record)}/>  
  //上面这一行是插入表格的数字输入框，他接收当前行的数据(record)
}]

//下面的count参数是数字输入框的值
changeCount = (rec