最近写了一个小东西，模仿自己原先用vue写的项目改成react语法。写了一个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要用的是react+antd
table表格，点击编辑，打开弹窗，弹窗内是tab切换显示不同的form表单+可编辑表格，表格内操作栏"+"，表格内新增一行可编辑的数据，编辑，保存，删除这些操作就不细说也不贴效果图了
Table/index.js
import React, { useState }from 'react' import { Row,Col,Card, Table, Tag, Divider, Modal, Button } from 'antd' ; import ModalData from './model' const App = (props) => { console.log(props, '----' ) const [isModalVisible, setIsModalVisible] = useState( false ); const columns = [ { title: 'Name' , dataIndex: 'name' , key: 'name' , render: text => <a>{text}</a>, }, { title: 'Age' , dataIndex: 'age' , key: 'age' , }, { title: 'Address' , dataIndex: 'address' , key: 'address' , }, { title: 'Tags' , key: 'tags' , dataIndex: 'tags' , render: tags => ( <label> {tags.map(tag => { let color = tag.length > 5 ? 'geekblue' : 'green' ; if (tag === 'loser' ) { color = 'volcano' ; } return ( <Tag color={color} key={tag}> {tag.toUpperCase()} </Tag> ); })} </label> ), }, { title: 'Action' , key: 'action' , align: 'center' , render: (record) => ( <label> <a onClick={() => showModal(record)}>编辑</a> <Divider type= "vertical" /> { /* <Button onClick={()=>showModal(record)} > 删除</Button> */ } <a onClick={()=>showModal(record)} > 删除</a> </label> ), }, ]; const data = [ { key: '1' , name: 'John Brown' , age: 32, address: 'New York No. 1 Lake Park' , tags: [ 'nice' , 'developer' ], }, { key: '2' , name: 'Jim Green' , age: 42, address: 'London No. 1 Lake Park' , tags: [ 'loser' ], }, { key: '3' , name: 'Joe Black' , age: 32, address: 'Sidney No. 1 Lake Park' , tags: [ 'cool' , 'teacher' ], } ]; const showModal = (row) => { setIsModalVisible( true ); }; const handleCancel = () => { setIsModalVisible( false ); } const handleOk = (form={},data) => { setIsModalVisible( false ); console.log(form,data, 'pp---' ) } return ( <label> <Row gutter={16} className= "gutter-row" > <Col md={24}> <Card title= "基本表格+简单弹框" bordered={ false }> <Table columns={columns} dataSource={data} /> </Card> </Col> </Row> {isModalVisible && <ModalData close={()=>{ handleCancel() }} saveOk={(form,data)=>{ handleOk(form,data) }}/>} { /* {isModalVisible && <ModalData />} */ } </label> ); }; const la = '111' export default () => ( <App/> )
Table/model/index.js
import React from 'react'
import Basic from './modules/base'
import EditTableData from './modules/editTableData'
import { Modal, Tabs, Spin } from "antd" ;
export default class ModalData extends React.Component{
constructor(){
super ()
this .state = {
isModalVisible: true ,
currentTab: 'basicColumns' ,
tableData:[]
}
}
componentWillMount(){
this .setState({
isModalVisible: this .props.isModalVisible
})
this .basicColumns = [
{title: '操作类型' ,editable: true ,dataIndex: 'name' },
{title: '名称' ,editable: true ,dataIndex: 'age' },
{title: '描述' ,editable: true ,dataIndex: 'address' }
]
this .associationColumns = [
{title: '前置操作' ,editable: true ,dataIndex: 'name' },
{title: '关联权限' ,editable: true ,dataIndex: 'age' },
{title: '关联操作' ,editable: true ,dataIndex: 'address' }
]
this .dataViewColumns = [
{title: '字段' ,editable: true ,dataIndex: 'name' },
{title: '描述' ,editable: true ,dataIndex: 'address' }
]
}
componentWillUpdate(){
console.log(22)
}
componentDidMount(){
console.log(11)
}
handleOk = () => {
// console.log(this.tabData,'this.formRefThree.props')
const form = this .formRef.props.form;
form.validateFields((err, fieldsValue) => {
if (!err) {
console.log( this .tabData, 'pp---00---' );
this .props.saveOk(fieldsValue, this .tabData)
}
});
}
saveTable(data){
console.log(data, this .state.currentTab, 'data---' )
this .tabData = {
[ this .state.currentTab]:data
}
}
changeTab(key){
console.log(key, 'key---' )
this .setState({
currentTab:key
})
}
render(){
return (
<Modal
title= "编辑"
width={650}
destroyOnClose
visible
onOk={ () => this .handleOk() }
onCancel={ () => this .props.close()}
>
<Tabs onChange={(key)=> this .changeTab(key)} >
<Tabs.TabPane tab= "基本信息" key= "basicColumns" >
<span>
<Basic wrappedComponentRef={(form) => this .formRef = form}/>
<EditTableData basicColumns={ this .basicColumns} saveTable={(data)=> this .saveTable(data)}/>
</span>
</Tabs.TabPane>
<Tabs.TabPane tab= "关联权限" key= "associationColumns" >
<EditTableData associationColumns={ this .associationColumns} saveTable={(data)=> this .saveTable(data)}/>
</Tabs.TabPane>
<Tabs.TabPane tab= "数据视图" key= "dataViewColumns" >
<EditTableData dataViewColumns={ this .dataViewColumns} saveTable={(data)=> this .saveTable(data)}/>
</Tabs.TabPane>
</Tabs>
</Modal>
)
}
}
Table/model/modules/base.js
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" name= "control-hooks" 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" name= "状态" required>
{getFieldDecorator( "requiredMark" )(
<Radio.Group>
<Radio.Button value= "optional" >启用</Radio.Button>
<Radio.Button value= "disabled" >禁用</Radio.Button>
</Radio.Group>
)}
</Form.Item>
<Form.Item name= "gender" 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 name= "customizeGender" 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实现可增删改表格的资料请关注服务器之家其它相关文章！
原文链接：https://juejin.cn/post/6947969446501679117
查看更多关于React+Antd 实现可增删改表格的示例的详细内容...