利用Ant design组件实现票据金额动态显示

        这个功能的需求是这样的，财务要求在打开页面的时候显示总票据金额，然后选择复选框的时候这个票据金额就显示的是被选择的数据的票据金额，如果没有选择任何数据显示的也是总票据的金额。

显示效果如图

 其中数值的显示用到了Ant的这个组件。

 其中的suffix是作为后缀的，显示“元”，precision表示保留几位小数。

<div>
  <Form.Item name="receivableAmount" label="收款金额：">
  <Statistic suffix="元" precision={2}/>
  </Form.Item>
</div>

复选框的代码如下。点击小框框的时候会触发displayAmount()函数。

        rowSelection={{
          onChange: (selectedRowKeys, selectedRows) => {
            settableselectedvalue(selectedRows);
            // console.log('selectedRows',selectedRows);
            displayAmount(selectedRows);
          },
        }}

 displayAmount()函数如下。记得要把参数传进这个函数。

  let displayAmount = (selectedData) => {
    let payAmount = 0;
    let receiveAmount = 0;
    selectedData.forEach(element => {
      payAmount = element?.payAmount + payAmount;
      receiveAmount = element?.receiveAmount + receiveAmount
    });
    // 保留两位小数
    form.setFieldsValue({'paymentAmount':Number(payAmount.toString().match(/^\d+(?:\.\d{0,2})?/)),
                        'receivableAmount':Number(receiveAmount.toString().match(/^\d+(?:\.\d{0,2})?/))})
    // 当没有复选数据时候，就重新显示总金额
    if (selectedData.length == 0) {
      form.setFieldsValue({'paymentAmount':props.Bank_Statement_data.apAmounts,'receivableAmount':props.Bank_Statement_data.arAmounts})
    }
  }

页面初始化的时候，用useEffect()来执行函数。

  useEffect(() => {
    form.setFieldsValue({'paymentAmount':props.Bank_Statement_data.apAmounts,'receivableAmount':props.Bank_Statement_data.arAmounts})
  },[props.Bank_Statement_data])