python 表格界面 可编辑_ant design v4可编辑表格class版

直接上index.tsx可以根据官网修改的可以直接运行

import {Form, Input, InputNumber, Popconfirm, Select, Table} from 'antd';

import React from "react";

const {Option} = Select;

const layout = {

labelCol: {span: 8},

wrapperCol: {span: 16},

};

const originData: any = [];

for (let i = 0; i < 100; i++) {

originData.push({

key: i.toString(),

name: `Edrward ${i}`,

age: 32,

address: `London Park no. ${i}`,

});

}

class EditableCell extends React.Component {

constructor(props) {

super(props);

}

getInput = () => {

if (this.props.inputType === 'number') {

return ;

}

return ;

};

render() {

const {

editing,

dataIndex,

title,

inputType,

record,

index,

children,

...restProps

} = this.props

return (

{editing ? (

required: true,

message: `Please Input ${title}!`,

}]}>

{this.getInput()}

) : (

children

)}

);

}

}

class EditableTable extends React.Component {

formRef = React.createRef();

constructor(props) {

super(props);

this.columns = [

{

title: 'name',

dataIndex: 'name',

width: '25%',

editable: true,

},

{

title: 'age',

dataIndex: 'age',

width: '15%',

editable: true,

},

{

title: 'address',

dataIndex: 'address',

width: '40%',

editable: true,

},

{

title: 'operation',

dataIndex: 'operation',

render: (text, record) => {

const {editingKey} = this.props.state;

const editable = this.isEditing(record);

return editable ? (

onClick={() => this.save(record.key)}

style={{

marginRight: 8,

}}

>

Save

this.cancel(record.key)}>

Cancel

) : (

this.edit(record)}>

Edit

);

},

},

];

}

isEditing = record => record.key === this.props.state.editingKey;

edit(record: any) {

this.formRef.current.setFieldsValue({

name: '',

age: '',

address: '',

...record,

});

this.props.handleEdit(record)

};

cancel = () => {

this.props.handleCancel()

};

save(key: any) {

const row = this.formRef.current.getFieldsValue();

const newData = [...this.props.state.data];

const index = newData.findIndex((item) => key === item.key);

if (index > -1) {

const item = newData[index];

newData.splice(index, 1, {...item, ...row});

} else {

newData.push(row);

}

this.props.handleSave(newData)

};

render() {

const components = {

body: {

cell: EditableCell,

},

};

const mergedColumns = this.columns.map(col => {

if (!col.editable) {

return col;

}

return {

...col,

onCell: record => ({

record,

inputType: col.dataIndex === 'age' ? 'number' : 'text',

dataIndex: col.dataIndex,

title: col.title,

editing: this.isEditing(record),

}),

};

});

return (

components={components}

bordered

dataSource={this.props.state.data}

columns={mergedColumns}

rowClassName="editable-row"

pagination={{

onChange: this.cancel,

}}

>

);

}

}

export default class Demo extends React.Component {

constructor(props: any) {

super(props);

this.state = {

data: originData,

editingKey: '',

}

}

handleEdit = (record: any) => {

this.setState({editingKey: record.key});

}

handleCancel = () => {

this.setState({editingKey: ''});

}

handleSave = (newData) => {

this.setState({

data: newData,

editingKey: ''

})

}

render() {

const parentMethods = {

handleEdit: this.handleEdit,

handleCancel: this.handleCancel,

handleSave: this.handleSave,

state: this.state

};

return (

//

)

}

}

注意点1:

传值问题：

子组件修改父组件的state必须 在父组件中定义，然后在子组件使用this.props进行调用父组件的方法，这个方法最后i修改state。

注意点2:

form的使用

v4的class版使用form那是真坑啊，耗费我好几天时间，记录下。

v4中使用form传递的时候

使用下面代替useForm()

formRef = React.createRef();

v4中Form.Item不支持设置默认值，但是这里的场景是需要单独设置的,所以使用

this.formRef.current.setFieldsValue({

name: '',

age: '',

address: '',

...record,

});

设置当前单元格的值

获取当前单元格的值用

const row = this.formRef.current.getFieldsValue();

具体看上面的代码