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

目录

• Table/index.js
• Table/model/index.js
• Table/model/modules/base.js
• Table/model/modules/editTable.js

最近写了一个小东西，模仿自己原先用vue写的项目改成react语法。写了一个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要用的是react+antd

table表格，点击编辑，打开弹窗，弹窗内是tab切换显示不同的form表单+可编辑表格，表格内操作栏"+"，表格内新增一行可编辑的数据，编辑，保存，删除这些操作就不细说也不贴效果图了

 

Table/index.js

1. import React, { useState }from 'react' 
2. import { Row,Col,Card, Table, Tag, Divider, Modal, Button } from 'antd'; 
3. import ModalData from './model' 
4.  
5.  
6. const App = (props) => { 
7.  console.log(props,'----') 
8.  const [isModalVisible, setIsModalVisible] = useState(false); 
9.  const columns = [ 
10.   { 
11.    title: 'Name', 
12.    dataIndex: 'name', 
13.    key: 'name', 
14.    render: text => <a>{text}</a>, 
15.   }, 
16.   { 
17.    title: 'Age', 
18.    dataIndex: 'age', 
19.    key: 'age', 
20.   }, 
21.   { 
22.    title: 'Address', 
23.    dataIndex: 'address', 
24.    key: 'address', 
25.   }, 
26.   { 
27.    title: 'Tags', 
28.    key: 'tags', 
29.    dataIndex: 'tags', 
30.    render: tags => ( 
31.     <label> 
32.      {tags.map(tag => { 
33.       let color = tag.length > 5 ? 'geekblue' : 'green'; 
34.       if (tag === 'loser') { 
35.        color = 'volcano'; 
36.       } 
37.       return ( 
38.        <Tag color={color} key={tag}> 
39.         {tag.toUpperCase()} 
40.        </Tag> 
41.       ); 
42.      })} 
43.     </label> 
44.    ), 
45.   }, 
46.   { 
47.    title: 'Action', 
48.    key: 'action', 
49.    align:'center', 
50.    render: (record) => ( 
51.     <label> 
52.      <a onClick={() => showModal(record)}>编辑</a> 
53.      <Divider type="vertical" /> 
54.      {/* <Button onClick={()=>showModal(record)} > 删除</Button> */} 
55.      <a onClick={()=>showModal(record)} > 删除</a> 
56.     </label> 
57.    ), 
58.   }, 
59.  ]; 
60.  const data = [ 
61.   { 
62.    key: '1', 
63.    name: 'John Brown', 
64.    age: 32, 
65.    address: 'New York No. 1 Lake Park', 
66.    tags: ['nice', 'developer'], 
67.   }, 
68.   { 
69.    key: '2', 
70.    name: 'Jim Green', 
71.    age: 42, 
72.    address: 'London No. 1 Lake Park', 
73.    tags: ['loser'], 
74.   }, 
75.   { 
76.    key: '3', 
77.    name: 'Joe Black', 
78.    age: 32, 
79.    address: 'Sidney No. 1 Lake Park', 
80.    tags: ['cool', 'teacher'], 
81.   } 
82.  ]; 
83.   
84.  const showModal = (row) => { 
85.   setIsModalVisible(true); 
86.  }; 
87.  const handleCancel = () => { 
88.   setIsModalVisible(false); 
89.  } 
90.  const handleOk = (form={},data) => { 
91.   setIsModalVisible(false); 
92.   console.log(form,data,'pp---') 
93.  } 
94.  
95.   
96.  
97.  return ( 
98.   <label> 
99.    <Row gutter={16} className="gutter-row"> 
100.     <Col md={24}> 
101.      <Card title="基本表格+简单弹框" bordered={false}> 
102.       <Table columns={columns} dataSource={data} /> 
103.      </Card> 
104.     </Col> 
105.    </Row> 
106.    {isModalVisible && <ModalData close={()=>{ 
107.     handleCancel() 
108.    }} saveOk={(form,data)=>{ handleOk(form,data) }}/>} 
109.    {/* {isModalVisible && <ModalData />} */} 
110.   </label> 
111.  ); 
112. }; 
113. const la = '111' 
114. export default () => ( 
115.  <App/> 
116. ) 

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