//组件部分
import React, { useContext, useState, useEffect, useRef } from 'react';
import { Table, Input, Form, DatePicker, Select } from 'antd';
import styles from './index.less';
import moment from 'moment';
const EditableContext = React.createContext(null);
const { Option } = Select;
const EditableRow = ({ index, ...props }) => {
const [form] = Form.useForm();
return (
<Form form={form} component={false}>
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
</Form>
);
};
const renderFormItem = (type, props, otherParam) => {
const { optionList } = otherParam;
console.log('optionList: ', optionList);
switch (type) {
case 'date':
return <DatePicker {...props} />;
case 'select':
return (
<Select placeholder="请选择" {...props}>
{optionList.map((item) => {
return (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
);
})}
</Select>
);
default:
return <Input {...props} placeholder="请输入" />;
}
};
const EditableCell = ({
title,
editable,
children,
dataIndex,
record,
handleSave,
editType,
rules,
optionList,
...restProps
}) => {
console.log(editType, 'editType');
const [editing, setEditing] = useState(false);
const editRef = useRef(null);
const form = useContext(EditableContext);
useEffect(() => {
if (editing) {
editRef.current.focus();
}
}, [editing]);
const toggleEdit = () => {
setEditing(!editing);
// form.setFieldsValue({
// [dataIndex]: record[dataIndex],
// });
};
const save = async () => {
try {
const values = await form.validateFields();
console.log('values: ', values);
toggleEdit();
handleSave({ ...record, ...values });
} catch (errInfo) {
console.log('Save failed:', errInfo);
}
};
let childNode = children;
if (editable) {
childNode = editing ? (
<Form.Item
style={{
margin: 0,
}}
name={dataIndex}
rules={rules}
initialValue={record[dataIndex]}
>
{renderFormItem(
editType,
{
ref: editRef,
onPressEnter: save,
onBlur: save,
style: { width: '100%' },
},
{
optionList,
},
)}
</Form.Item>
) : (
<div
className="editable-cell-value-wrap"
style={{
width: '100%',
minHeight: 32,
}}
onClick={toggleEdit}
>
{children}
</div>
);
}
return <td {...restProps}>{childNode}</td>;
};
export default class EditableTable extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: props.dataSource || [],
columns: props.columns || [],
};
}
handleDelete = (key) => {
const dataSource = [...this.state.dataSource];
this.setState({
dataSource: dataSource.filter((item) => item.key !== key),
});
};
handleSave = (row) => {
const newData = [...this.state.dataSource];
const index = newData.findIndex((item) => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, { ...item, ...row });
this.setState({
dataSource: newData,
});
};
render() {
const { dataSource } = this.state;
const { className, loading } = this.props;
const components = {
body: {
row: EditableRow,
cell: EditableCell,
},
};
const columns = this.state.columns.map((col) => {
console.log('col: ', col);
if (!col.editable) {
return col;
}
return {
...col,
ellipsis: { showTitle: 'false' },
onCell: (record) => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
handleSave: this.handleSave,
editType: col.type,
rules: col.rules,
optionList: col.optionList || [],
}),
};
});
return (
<Table
rowKey={'id'}
className={`${styles.editableTable} ${className}`}
components={components}
rowClassName={() => 'editable-row'}
bordered={false}
dataSource={dataSource}
columns={columns}
loading={loading}
/>
);
}
}
//样式部分
.editableTable {
:global {
.editable-cell {
position: relative;
}
.editable-cell-value-wrap {
cursor: pointer;
display: flex;
align-items: center;
&:hover {
border: 1px solid #d9d9d9;
border-radius: 2px;
}
}
}
}
//页面引用部分
const dataList = [
{ id: '1', name: '张三', date: moment() },
{ id: '2', name: '里斯' },
];
const testColumns: any = [
{
key: 'id',
dataIndex: 'id',
title: 'ID',
readonly: true,
editable: true,
type: 'number',
},
{ key: 'name', dataIndex: 'name', title: '姓名', editable: true },
{
key: 'date',
dataIndex: 'date',
title: '日期',
editable: true,
type: 'date',
render: (text: any, record: any) => {
return text ? moment(text).format('YYYY-MM-DD') : '';
},
},
{
key: 'position',
dataIndex: 'position',
title: '选择',
editable: true,
type: 'select',
optionList: [
{ id: '1', name: '选择1' },
{ id: '2', name: '选择2' },
],
render: (text: any, record: any) => {
return text ? (text === '1' ? '选择1' : '选择2') : '';
},
},
{
key: 'action',
title: '操作',
align: 'center',
render: (text: any, record: any) => {
return (
<Button
color="primary"
onClick={() => {
console.log(record, 'record');
}}
>
保存
</Button>
);
},
},
];
import AntdTable from './AntdAllowEditTable';
<AntdTable
dataSource={dataList}
columns={testColumns}
loading={loading}
/>
Antd 可编辑表格暂存
最新推荐文章于 2023-03-14 22:09:58 发布