服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - React - React+Antd 实现可增删改表格的示例

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

2022-02-24 16:44用户320228579782 React

这篇文章主要介绍了React+Antd实现可增删改表格的示例,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下

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

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

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

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

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

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

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

 

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/> 

Table/model/index.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
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

延伸 · 阅读

精彩推荐
  • Reactreact获取input输入框的值的方法示例

    react获取input输入框的值的方法示例

    这篇文章主要介绍了react获取input输入框的值的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友...

    Pinkh8222022-02-24
  • Reactreact diff算法源码解析

    react diff算法源码解析

    这篇文章主要介绍了react diff算法源码解析的相关资料,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下...

    zhangyu5632022-02-27
  • Reactreact如何用懒加载减少首屏加载时间

    react如何用懒加载减少首屏加载时间

    这篇文章主要介绍了react如何利用懒加载减少首屏加载时间,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下...

    阿政想暴富7412022-03-03
  • ReactReact tsx生成随机验证码

    React tsx生成随机验证码

    这篇文章主要为大家详细介绍了React tsx生成随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    laipengfei196252022-03-09
  • ReactReact html中使用react的两种方式

    React html中使用react的两种方式

    这篇文章主要介绍了React html中使用react的两种方式,本文给大家提到了React pwa的配置代码,给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴...

    愚公搬代码6422022-02-23
  • React详解React Fiber的工作原理

    详解React Fiber的工作原理

    这篇文章主要介绍了React Fiber的工作原理的相关资料,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下...

    陌上兮月7942022-03-08
  • React深入理解React Native核心原理(React Native的桥接(Bridge)

    深入理解React Native核心原理(React Native的桥接(Bridge)

    这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接(Bridge),本文重点给大家介绍React Native的基础知识及实现原理,需要的朋友可以参考下...

    Gavell9712022-02-23
  • Reactreact-native 实现购物车滑动删除效果的示例代码

    react-native 实现购物车滑动删除效果的示例代码

    这篇文章主要介绍了react-native 实现购物车滑动删除效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    程序猿tx3902021-12-31