パイオニア扇風機
4156 ワード
import React, { useState } from 'react';
import { Table, Input, InputNumber, Row, Popconfirm, Button, Form } from 'antd';
const originData = [];
const EditableCell = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => {
const inputNode = ;
return (
{editing ? (
{inputNode}
) : (
children
)}
);
};
const EditableTable = () => {
const [form] = Form.useForm(); // form
const [data, setData] = useState(originData); //dataSource
const [editingKey, setEditingKey] = useState(''); // key
const isEditing = (record) => record.key === editingKey;
const edit = (record) => {
console.log('111',record)
form.setFieldsValue({
name: '',
dim_name: '',
dim_value: '',
order_no:'',
...record,
});
setEditingKey(record.key);
};
const cancel = () => {
setEditingKey('');
};
const save = async (key) => {
try {
const row = await form.validateFields();
console.log('row',row)
const newData = [...data];
const index = newData.findIndex((item) => key === item.key);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, { ...item, ...row });
setData(newData);
setEditingKey('');
} else {
newData.push(row);
setData(newData);
setEditingKey('');
}
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
};
const columns = [
{
title: ' ',
dataIndex: 'name',
width: '25%',
editable: false,
},
{
title: ' ',
dataIndex: 'dim_name',
width: '15%',
editable: true,
},
{
title: ' ',
dataIndex: 'dim_value',
width: '20%',
editable: true,
},{
title: ' ',
dataIndex: 'order_no',
width: '20%',
editable: true,
},
{
title: ' ',
dataIndex: 'operation',
render: (_, record) => {
const editable = isEditing(record);
return editable ? (
) : (
);
},
},
];
const handleDelete = (record) => {
console.log('record',record,data)
let newData = [...data];
setData(newData.filter(item=> item.key !== record.key))
}
const mergedColumns = columns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record) => ({
record,
inputType:'text',
dataIndex: col.dataIndex,
title: col.title,
editing: isEditing(record),
}),
};
});
const handleAdd = () => {
console.log('datra',data)
setData([...data,{key:parseInt(Math.random() * 61),name:'111',dim_name:'',dim_value:'',order_no:''}])
}
return (