解决react表格嵌套主表和子表都可以新增、编辑、保存、删除
1. 简述
作者查阅资料，花了几天时间，解决了多个问题。现分享出来，供大家参考。支持新增行、单行编辑保存、展开、分页国际化；子表格增加、编辑、删除、保存。（包含组件，不包含store）
2. 说明
2.1 index.js 里有测试数据
2.2 使用后端数据可以把测试数据删除，修改有store的地方，后端返回json，支持分页等
3. 代码（index.js、TableLayout.js）
3.1 index.js
import React, {Component, useState, useCallback, useRef, PureComponent} from 'react';
import Tablelayout from 'components/TableLayout';
import {observer, inject} from 'mobx-react';
import {message, Table} from 'antd';
import {Form, LocaleProvider, Input,Button, Select, Popconfirm, Divider, Icon,} from "antd";
import '../../../css/iconfont.css';
import {toJS} from "mobx";
import '../index.less';
import zn_CN from 'antd/lib/locale-provider/zh_CN';
import TableLayout from "../../../components/TableLayout";
const {Item, FormItem} = Form;
const {Option} = Select;
const {Provider, Consumer} = React.createContext(); //组件之间传值
var dataType = 0;
const EditableRow = ({form, index, ...props}) => (
<Provider value={form}>
<tr {...props} />
</Provider>
);
// 以下为测试数据
var isLoading =false;
var pageInfo={pageIndex: 1, pageSize: 10, total:100}
var productList=[{
id:1,
productKey:'1001',
productName:'产品1'
}, {
id:2,
productKey:'1002',
productName:'产品2'
}]
var tableData=[{
id:1,
productId:1,
productKey:'1',
fruitName:'哈密瓜',
test1:'产地1',
test2:'味道1',
test3:'测试1',
test4:'测试1',
conversionRatio:0.1,
isFruit:'是',
sortNum:1,
subInfos:[{
id:100,
fruitName:'西州哈密瓜',
test11:'测试',
test22:'测试',
test33:'测试',
description:''
},{
id:101,
fruitName:'东湖哈密瓜',
test11:'测试',
test22:'测试',
test33:'测试',
description:''
}]
}, {
id:2,
productId:1,
fruitName:'草莓',
test1:'产地2',
test2:'味道2',
test3:'测试2',
test4:'测试2',
conversionRatio:0.1,
isFruit:'是',
sortNum:2
}, {
id:3,
productId:1,
fruitName:'胡萝卜',
test1:'产地3',
test2:'味道3',
test3:'测试3',
test4:'测试3',
conversionRatio:0.1,
isFruit:'否',
sortNum:3
}
]
@inject('ConfigManageStore')
@observer
class TableRow extends Component {
constructor(props) {
super(props)
this.store = this.props.ConfigManageStore;
this.state = {
productKey: '1001',
productName: '产品1',
parentTabId: '',
dataType: 0,
editFlag: '',
value: '',
expandedRowKeys: [],
dataSource: [{fruitName: ''}]
};
this.handleAdd = this.handleAdd.bind(this);
this.handleDel = this.handleDel.bind(this);
this.baseColumns = [
{title: 'id', dataIndex: 'id', editable: true, className: 'hide_col'},
{title: 'productId', dataIndex: 'productId', editable: true, className: 'hide_col'},
{title: '名称', dataIndex: 'fruitName', editable: true, align: 'center', width: 200},
{title: '测试1', dataIndex: 'test1', editable: true, align: 'center'},
{title: '测试2', dataIndex: 'test2', editable: true, align: 'center',width:100},
{title: '测试3', dataIndex: 'test3', editable: true, align: 'center'},
{title: '测试4', dataIndex: 'test4', editable: true, align: 'center',},
{title: '精度', dataIndex: 'conversionRatio', editable: true, align: 'center'},
{title: '是否属于水果', dataIndex: 'isFruit', editable: true, align: 'center'},
{title: '排序', dataIndex: 'sortNum', editable: true, align: 'center', width: 100},
{
title: '操作', width: 200, align: 'center', dataIndex: 'operation', render: (text, record, index) => {
const {editFlag} = this.state;
const editable = this.isEditing(record);
return <div>{this.editable(editable, editFlag, record)}</div>
}
}
];
this.detailColumns = [
{title: 'id', dataIndex: 'id', key: 'id', editable: true, className: 'hide_col'},
{title: '名称', dataIndex: 'fruitName', key: 'fruitName', editable: true}
]
this.childColumns = [
{title: 'id', dataIndex: 'id', key: 'id1', editable: true, className: 'hide_col'},
{
title: '名称',
dataIndex: 'fruitName',
key: 'fruitName1',
editable: true,
align: 'center',
width: 150
},
{title: '测试11', dataIndex: 'test11', editable: true, align: 'center'},
{title: '测试22', dataIndex: 'test22', editable: true, align: 'center'},
{title: '测试33', dataIndex: 'test33', editable: true, align: 'center'},
{title: '描述', dataIndex: 'description', editable: true, align: 'center', width: 200},
{
title: '操作', width: 150, align: 'center', dataIndex: 'operation', render: (text, record, index) => {
const {editFlag} = this.state;
const editable = this.isEditing(record);
return <div>{this.editable(editable, editFlag, record)}</div>
}
}];
}
componentDidMount() {
let sendData = {
productKey: "1001",
pageIndex: 1,
pageSize: 10
};
this.store.getDataSource(0, sendData);
this.store.getSelectProductList();
}
componentWillUnmount() {
this.store.tableData = []
this.store.pageInfo = {
pageIndex: 1,
pageSize: 10
}
}
//编辑
edit = (id) => {
this.setState({
editFlag: id
})
};
//保存
save = (form, record) => {
this.props.form.validateFields((error, row) => {
if (error) {
return
}
let newData = []
const {productKey, dataType} = this.state
newData = this.store.tableData
if (dataType == 0) {
let param = {
productKey,
...row
}
this.store.editGreenFruit(param);
const editBean = this.store.editBean;
if (record.id == null) {
newData.splice(0, 1, {
editBean,
...row,
});
} else {
const index = newData.findIndex(item => item.id === record.id);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, {
...row,
});
}
}
this.setState({
editFlag: '',
});
} else {
const {parentTabId} = this.state;
const index = newData.findIndex(item => item.id === parentTabId);
if (index > -1) {
const item = newData[index].subInfos;
for (let i in item) {
if (item[i].id == record.id) {
newData[index].subInfos.splice(i, 1, {
...row,
});
break;
}
}
}
let param = {
contentId: Number(parentTabId),
...row
}
this.store.editFruit(param);
this.setState({
editFlag: '',
})
}
const {pageIndex,pageSize}=this.store.pageInfo
this.store.getDataSource(dataType, {productKey, pageIndex:pageIndex, pageSize:pageSize})
})
};
//取消
cancel = () => {
const {editFlag, dataType} = this.state;
const {tableData} = this.store;
if (editFlag == null) {
if (dataType == 0) {
tableData.shift();
} else {
const {parentTabId} = this.state
const index = tableData.findIndex(item => item.id === parentTabId);
tableData[index].subInfos.pop();
}
}
this.setState({
editFlag: ''
})
};
handleAdd() {
const {editFlag, dataType} = this.state;
if (editFlag !== '') {
message.warn("请先保存", 1)
return;
}
let tableData = this.store.tableData
if (dataType == 0) {
tableData.unshift({
fruitName: '',
test1: '',
test2: '',
test3: '',
test4: '',
conversionRatio: '',
isFruit: '',
sortNum: ''
});
} else {
const {parentTabId} = this.state
const index = tableData.findIndex(item => item.id === parentTabId);
const subInfos = [];
if (index > -1) {
tableData[index].subInfos.push({
fruitName: '',
test1: '',
test2: '',
test3: '',
description: ''
});
}
}
this.setState({editFlag: null});
}
handleSearch = () => {
let {productKey, dataType} = this.state
const {productList} = toJS(this.store);
const index = productList.findIndex(item => item.productKey === productKey);
this.store.getDataSource(dataType, {productKey, pageIndex: 1, pageSize: 10});
this.setState({productName: productList[index].productName})
};
handleDel(record) {
const newData = this.store.tableData
if (this.state.dataType == 0) {
this.store.deleteGreenFruitField({id: record.id})
const index = newData.findIndex(item => item.id === record.id);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1);
}
} else {
this.store.deleteFruitField({id: record.id})
const index = newData.findIndex(item => item.id === this.state.parentTabId);
const subInfos = [];
if (index > -1) {
const item = newData[index].subInfos;
for (let i in item) {
if (item[i].id == record.id) {
newData[index].subInfos.splice(i, 1);
break;
}
}
}
}
}
onPageChange = (pageIndex, pageSize) => {
let {productKey, dataType} = this.state;
this.store.getDataSource(dataType, {productKey, pageIndex, pageSize})
}
onSelectDataType = (value) => {
let {productKey} = this.state
this.setState({dataType: Number(value)}, () => {
this.store.getDataSource(value, {productKey, pageIndex: 1, pageSize: 10})
})
}
// 选中产品下拉菜单
onSelectProduct = (value) => {
this.setState({productKey: value});
}
//判断是否可编辑
isEditing = record => record.id == this.state.editFlag
editable = (editable, editFlag, record) => {
const ele = editable ? (
<span style={{width: 100, display: 'block'}}>
<Consumer>
{
form => (
<a onClick={() => this.save(form, record)} style={{marginRight: 8}}>
保存
</a>
)
}
</Consumer>
<Popconfirm
title="是否确定取消?"
onConfirm={this.cancel}
okText="确定"
cancelText="取消"
>
<a>取消</a>
</Popconfirm>
</span>
) : (
<span>
<Icon type="edit" disabled={editFlag !== ''} onClick={() => this.edit(record.id)}/>
<Divider type="vertical"/>
<Popconfirm
title="是否确定删除?"
onConfirm={(e) => {
this.handleDel(record)
}} //点击确认的回调
okText="确定"
cancelText="取消"
>
<Icon type="delete"/>
</Popconfirm>
</span>
);
return ele
}
expandTable = (expanded, record) => {
this.setState({parentTabId: record.id})
// 如果已经展开则收回，否则展开
let expandedRows = this.state.expandedRowKeys;
if (expandedRows.includes(record.id)) {
this.setState({expandedRowKeys: []})
} else {
// 获取数据并展开当前行
let arr = []
arr.push(record.id)
this.setState({expandedRowKeys: arr})
}
}
expandedRowRender = (record) => {
// 子列表也要编辑（字列表不用编辑可以不用，省略了一些子列表编辑代码）
// const childTableRow = ({form, index, ...props}) => (
// 3.2 TableLayout.js
import React,{Component} from 'react';
import { Table } from 'antd';
import { omit,isEmpty } from 'lodash';
export default class TableLayout extends Component {
render(){
const { pagination,...otherProps} = this.props;
return <Table
size='middle'
{...otherProps}
locale={{emptyText:' '}}
pagination={
!isEmpty(pagination) ? pagination.total > 10 && {
...omit(pagination,'pageIndex'),
current:pagination.pageIndex,
showTotal:(total,range)=>{
return <div style={{lineHeight:'26px'}}>
总共{total}条，每页{pagination.pageSize}条
</div>
}
} :false
}
/>
}
}
4. 效果图
欢迎留言