想实现一个可以编辑的表格，并且表格内的数据可以实现联动，自动的计算
比如最简单的，单价*数量=金额，当我们输入单价和数量同时存在的时候，金额自动计算出来
或者是修改单价和数量中的其中一项的时候，金额也会随之而且改变，因为对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
});
}效果如下：
希望对你有所帮助！
