import React, {
useContext, useState, useEffect, useRef } from 'react';
import {
Input, Form, } from 'antd';
import Table from '@com/Table';
import 'antd/dist/antd.css';
import '../styles/search.less';
//
import '../styles/edittables.less'
/**
* 只适用于 单个单元格修改
* 必传字段 ：
* columns:[],
* dataSource:[]
* 必传方法
* saveFun 用于改变input输入值之后触发的回调函数
*/
const EditableContext = React.createContext(null);
const EditableRow = ({
index, ...props }) => {
const [form] = Form.useForm();
return (
<Form form={
form} component={
false}>
<EditableContext.Provider value={
form}>
<tr {
...props} />
</EditableContext.Provider>
</Form>
);
};
const EditableCell = ({
title,
editable,
children,
dataIndex,
record,
saveFun,
...restProps
}) => {
const [editing, setEditing] = useState(false);
const inputRef = useRef(null);
const form = useContext(EditableContext);
useEffect(() => {
if (editing) {
inputRef.current.focus();
}
}, [editing]);
const toggleEdit = () => {
setEditing(!editing);
form.setFieldsValue({
[dataIndex]: record[dataIndex],
});
};
const save = async () => {
try {
const values = await form.validateFields();
toggleEdit();
// 返回当前行信息 包括更改后的信息
saveFun({
...record, ...values })
} catch (errInfo) {
console.log('Save failed:', errInfo);
}
};
let childNode = children;
//判断是否可编辑
if (editable) {
childNode = editing ? (
<Form.Item
style={
{
margin: 0,
lineHeight: "27px"
}}
name={
dataIndex}
rules={
[
{
required: true,
message: `${
title} is required.`,
},
]}
>
<Input ref={
inputRef} style={
{
height: "22px", borderRadius: "4px" }} onPressEnter={
save} onBlur={
save} />
</Form.Item>
) : (
<div
className="editable-cell-value-wrap"
style={
{
paddingRight: 24,
}}
onClick={
toggleEdit}
>
{
children}
</div>
);
}
return <td {
...restProps}>{
childNode}</td>;
};
class EditableTable extends React.Component {
static defaultProps = {
columns: [],
dataSource: []
}
render() {
const {
dataSource,columns,saveFun, ...rest } = this.props;
// 每一行 每一个单元格
const components = {
body: {
row: EditableRow,
cell: EditableCell,
},
};
const newColumns = columns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record) => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
saveFun: saveFun
}),
};
});
return (
<div>
<Table
{
...rest}
components={
components}
rowClassName={
() => 'editable-row'}
dataSource={
dataSource}
columns={
newColumns}
/>
</div>
);
}
}
export default EditableTable
使用：
<EditTable
bordered={
false}
size={
'default'}
columns={
columns} //表格的列
dataSource={
dataTable} //表格渲染的数据
title={
tableName} //表格的名字
pagination={
false}
saveFun={
this.saveFun}
/>
columns：
columns: [
{
title: () => '序号(可编辑)',
dataIndex: 'priority',
width: '10%',
key: 'priority',
editable: true,
},
{
title: () => 'xx',
dataIndex: 'generate',
key: 'generate'
},
{
title: () => 'xx',
dataIndex: 'ttl',
key: 'ttl'
},
{
title: () => 'xx',
dataIndex: 'type',
key: 'type'
},
{
title: () => 'xx',
dataIndex: 'value',
key: 'value'
},
]
editable属性为true的时候表示当前单元格可编辑；saveFun为该单元格离开焦点或者回车之后出发的回调函数。
saveFun：
saveFun=(item)=>{
// item为当前行 的所有属性
}
参考antd官方可编辑单元格：https://ant.design/components/table-cn/#components-table-demo-edit-cell
其实上边98%的代码都是固定写法，ctrl C V 即可实现…
