React+Antd 实现可增删改表格的示例(2)

import React from 'react' import { Form, Input, Select, Radio } from 'antd'; const { Option } = Select; // const Basic = (props) => { class Basic extends React.Component{ formRef = React.createRef(); // const [form] = Form.useForm(); onGenderChange(value){ switch (value) { case 'male': this.props.form.setFieldsValue({ note: 'Hi, man!', }); return; case 'female': this.props.form.setFieldsValue({ note: 'Hi, lady!', }); return; case 'other': this.props.form.setFieldsValue({ note: 'Hi there!', }); return; } } onFinish(values){ console.log(values); console.log(this.props.form.getFieldsValue,'09900--') } render(){ console.log(this.props.form.getFieldValue('gender'),'990----') const { form } = this.props; const { getFieldDecorator, getFieldValue} = form; return ( <div> <Form ref={this.formRef} layout="inline" onFinish={this.onFinish.bind(this)}> <Form.Item label="权限标识" required> {getFieldDecorator("note")(<Input placeholder="请输入"/>)} </Form.Item> <Form.Item label="权限名称" required> {getFieldDecorator("name")(<Input placeholder="请输入"/>)} </Form.Item> <Form.Item label="requiredMark" required> {getFieldDecorator("requiredMark")( <Radio.Group> <Radio.Button value="optional">启用</Radio.Button> <Radio.Button value="disabled">禁用</Radio.Button> </Radio.Group> )} </Form.Item> <Form.Item label="分类" required> {getFieldDecorator("gender")( <Select style={{width: '250px'}} placeholder="请选择" onChange={this.onGenderChange.bind(this)} allowClear > <Option value="male">api借口</Option> <Option value="female">租户</Option> <Option value="other">系统</Option> </Select> )} </Form.Item> {getFieldValue('gender') == 'other' && <Form.Item label="备注"> {getFieldDecorator("customizeGender")(<Input />)} </Form.Item>} </Form> </div> ) } } export default Form.create()(Basic)

Table/model/modules/editTable.js

import React, { useState } from 'react'; import { Table, Input, InputNumber,Divider, Popconfirm, Form, Typography } from 'antd'; import {PlusSquareOutlined} from '@ant-design/icons'; const { Provider, Consumer } = React.createContext()//组件之间传值 const originData = []; for (let i = 0; i < 5; i++) { originData.push({ key: i.toString(), name: `Edrward ${i}`, age: 32, address: `London Park no. ${i}`, }); } class EditableCell extends React.Component{ renderCell = ({getFieldDecorator}) => { const { editing, dataIndex, title, Inputs, record, index, children, ...restProps } = this.props return ( <td {...restProps}> {editing ? ( <Form.Item style={{ margin: 0, }} > {getFieldDecorator(dataIndex,{ rules: [{ required: true, message: '请输入' }], initialValue: record[dataIndex] })( <Inputs /> )} </Form.Item> ) : ( children )} </td> ); } render(){ return <Consumer>{this.renderCell}</Consumer> } } class EditTableData extends React.Component{ constructor(props){ super(props) this.state = { data:originData, editingKey:'' } } // 判断是否可编辑 isEditing = record => record.key == this.state.editingKey // 初始化 init(){ console.log(this.props,'pp--') const data = this.props.basicColumns || this.props.dataViewColumns || this.props.associationColumns || [] this.columns = [ ...data, { title: ()=>{ return <span>操作<Divider type="vertical" /><PlusSquareOutlined style={{color:"#333"}} onClick={()=>this.addColumns()}/></span> }, width:'20%', dataIndex: 'operation', render: (_, record) => { const { editingKey } = this.state const editable = this.isEditing(record); return editable ? ( <span> <Consumer> { form => ( <a onClick={() => this.save(form,record.key)} > 保存 </a>) } </Consumer> <Divider type="vertical" /> <Popconfirm okText="确认" cancelText="取消" title="是否确定取消?" onConfirm={this.cancel}> <a>取消</a> </Popconfirm> </span> ) : ( <span> <a disabled={editingKey != ''} onClick={()=>this.edit(record.key)}>编辑</a> <Divider type="vertical" /> <Popconfirm okText="确认" cancelText="取消" title="是否确定取消?" onConfirm={()=>this.delete(record.key)}> <a>删除</a> </Popconfirm> </span> ); }, }, ]; } // 添加 addColumns = () => { const newData = [...this.state.data] newData.push({ key: newData.length, name: ``, age: '', address: `` }) this.setState({ data:newData }) } // 编辑 edit = (key) => { this.setState({ editingKey:key }) } // 删除 delete = (key) => { const newData = [...this.state.data] const index = newData.findIndex(item=>item.key == key) newData.splice(index,1) this.setState({ data:newData }) } // 保存 save = (form,key) => { form.validateFields((error,row)=>{ if(error){ return } const newData = [...this.state.data] const index = newData.findIndex(item=>item.key == key) if(index > -1){ const item = newData[index] newData.splice(index,1,{ ...item,...row }) } this.setState({ editingKey:'', data:newData }) this.props.saveTable(newData) }) } // 取消 cancel = () => { this.setState({ editingKey: '' }) } render(){ this.init() console.log(this.columns,'columns') const columns = this.columns.map(col => { if(!col.editable){ return col } return { ...col, onCell:record => ({ record, Inputs:Input, dataIndex:col.dataIndex, title:col.title, editing:this.isEditing(record) }) } }) return ( <Provider value={this.props.form}> <Table bordered style={{marginTop:'30px'}} components={{ body:{ cell:EditableCell } }} columns={columns} dataSource={this.state.data} pagination={false}/> </Provider> ) } } export default Form.create()(EditTableData)

以上就是React+Antd实现可增删改表格的示例的详细内容，更多关于React+Antd实现可增删改表格的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章: