react EditableProTable 表格内联动

想实现一个可以编辑的表格，并且表格内的数据可以实现联动，自动的计算

比如最简单的，单价*数量=金额，当我们输入单价和数量同时存在的时候，金额自动计算出来

或者是修改单价和数量中的其中一项的时候，金额也会随之而且改变，因为对EditableProTable比较初次使用，所以在编写的时候也遇到的很多的问题，中途也跑了弯路，但是功夫不负有心人，最终问题得到解决

这样的一个表格，首先我们来看创建的方式：

import React from 'react'
import service from '@/utils/AxiosService.js' 
import { Table,Row,Input,Button,Space,Col,Modal,Form,message} from 'antd'
import type { ProColumns } from '@ant-design/pro-components';
import { EditableProTable, ProCard, ProFormField } from '@ant-design/pro-components'
export default class EditTable extends React.Component{
    tableRef = React.createRef();
    constructor(){
        super();
        this.state={
             dataSource:[],
             sumhjje:0,
        }
    }
    componentDidMount() {
    }
    setDataSource=(list)=>{
       let sumhjje=0;
       list.forEach((item)=>{
           if(item.price!==undefined && item.spsl!==undefined){
               let spsl=item.spsl;
               let spdj=item.price;
               let hjje=(Number(spsl)*Number(spdj)).toFixed(2);
               item.hjje=hjje;
           }
           if(item.hjje!==undefined){
                sumhjje=sumhjje+Number(item.hjje);
           }
       })
       this.setState({
            dataSource:list,
            sumhjje:sumhjje
        });
    }
    setEditableRowKeys=()=>{
 
    }
    
    render(){
          const columns: ProColumns<DataSourceType>[] = [
            {
              title: '数量',
               key: 'spsl',
              dataIndex: 'spsl',
    
            },
            {
              title: '单价',
              key: 'price',
              dataIndex: 'price',
             
              
            },
            {
              title: '总金额',
              key: 'hjje',
              dataIndex: 'hjje',
        
            },
            {
              title: '操作',
              valueType: 'option',
              render: (text, record, _, action) => {
                 return  <Space>
                     <a key="editable" onClick={() => { action?.startEditable?.(record.id); }}> 编辑</a>
                     <a key="delete" onClick={() => { this.setDataSource(this.state.dataSource.filter((item) => item.id !== record.id));}}>删除 </a>
                  </Space>
              },
            },
        ];
        return (
         <div className="container">
                <p>{this.state.sumhjje}</p>
                <EditableProTable
                      DataSourceType
                      headerTitle="可编辑表格"
                      columns={columns}
                      rowKey="id"
                      maxLength={8}
                      value={this.state.dataSource}
                      controlled={true}
                      onChange={(list)=>this.setDataSource(list)}
                      recordCreatorProps={{
                        newRecordType: 'dataSource',
                        record: () => ({
                              id: Date.now(),
                        }),
                      }}
                       editableFormRef={this.tableRef}
                      editable={{
                        type: 'multiple',
                        actionRender: (row, config, defaultDoms) => {
                             return [defaultDoms.delete];
                        },
                        onChange: this.setEditableRowKeys,
                      }}
                    />
         </div>
        );
    }
}

当然这里EditableProTable 中比较重要的属性是：

controlled={true}

onChange={(list)=>this.setDataSource(list)}

当设置controlled为true的时候，那么每次的数据都会调用onChange这个方法，方法会将整个列表的list作为参数传入，那么我们获取到list 再来设置每一项的值，这样就实现了表格内的联动

    setDataSource=(list)=>{
       let sumhjje=0;
       list.forEach((item)=>{
           if(item.price!==undefined && item.spsl!==undefined){
               let spsl=item.spsl;
               let spdj=item.price;
               let hjje=(Number(spsl)*Number(spdj)).toFixed(2);
               item.hjje=hjje;
           }
           if(item.hjje!==undefined){
                sumhjje=sumhjje+Number(item.hjje);
           }
       })
       this.setState({
            dataSource:list,
            sumhjje:sumhjje
        });
    }

效果如下：

希望对你有所帮助！