对于 React 结合 Antd 的 Table 组件实现表格的渲染、新增、修改和删除

怼烎@ 2022-11-12 01:49 1383阅读 0赞

#### 一、React 结合 Antd 实现表格的渲染、新增、修改和删除 ####

1.  引入所需相关的组件和文件，代码如下所示：

1.  创建 `User` 组件，定义初始化的 `state`。`users` 为所有用户列表，默认为空数组。`roles` 为所有角色列表，默认为空数组。`isShow` 为是否显示确认框，默认为 `false`，代码如下所示：

state = { 
        users: [], 
        roles: [], 
        isShow: false, 
     }

1.  在 `User` 组件中，通过 `initColumns` 初始化表格列，最后返回的 `this.columns` 就是表格显示的列，代码如下所示：

initColumns = () => { 
        this.columns = [
          { 
            title: '用户名',
            dataIndex: 'username'
          },
          { 
            title: '邮箱',
            dataIndex: 'email'
          },
          { 
            title: '电话',
            dataIndex: 'phone'
          },
          { 
            title: '注册时间',
            dataIndex: 'create_time',
            render: formateDate
          },
          { 
            title: '所属角色',
            dataIndex: 'role_id',
            render: (role_id) => this.roleNames[role_id]
          },
          { 
            title: '操作',
            render: (user) => (
              <span>
                <LinkButton onClick={ () => this.showUpdate(user)}>修改</LinkButton>
                <LinkButton onClick={ () => this.deleteUser(user)}>删除</LinkButton>
              </span>
            )
          }
        ]
      }

1.  在 `User` 组件中，定义 `initRoleNames` 方法，根据 `role` 的数组, 生成包含所有角色名的对象，属性名用角色 `id` 值，最后通过 `this.roleNames` 保存 `roleNames`，在 `initColumns` 方法中的所属角色调用。`showUpdate` 是显示修改界面，保存 `user`，通过 `setState` 设置 `isShow` 为 `true`。`showAdd` 是显示添加界面，去除前面保存的`user`，通过 `setState` 设置 `isShow` 为 `true`。`showUpdate` 和 `showAdd` 也会在 `initColumns` 方法中的操作调用，代码如下所示：

initRoleNames = (roles) => { 
        const roleNames = roles.reduce((pre, role) => { 
          pre[role._id] = role.name
          return pre
        }, { })
        this.roleNames = roleNames
      }
    
      showUpdate = (user) => { 
        this.user = user
        this.setState({  isShow: true })
      } 
    
      showAdd = () => { 
        this.user = null
        this.setState({  isShow: true })
      }

1.  在 `User` 组件中，定义 `getUsers` 方法，获取所有的用户列表。发起请求，如果 `result.status` 为 0，说明请求成功，将 `result.data` 结构获得 `users` 和 `roles`，通过 `setState` 设置 `state` 中的 `users` 和 `roles`，代码如下所示：

getUsers = async () => { 
        const result = await reqUsers()
        if (result.status === 0) { 
          const {  users, roles } = result.data
          this.setState({ 
            users,
            roles
          })
        }
      }

1.  在 `componentWillMount` 生命周期中，调用 `initColumns()`，初始化表格列。在 `componentDidMount` 生命周期中，调用 `getUsers()`，获取所有的用户列表，代码如下所示：

componentWillMount () { 
        this.initColumns()
      }
    
      componentDidMount () { 
        this.getUsers()
      }

1.  在 `render` 中，通过 `this.state` 解构获得 `users、isShow 和 roles`，定义 `user` 和 `title`。在 `return` 中，使用 `Card` 组件进行包裹，里面放入 `Table` 组件，用于显示表格。`Table` 中，`bordered` 是是否展示外边框和列边框；`rowKey` 是表格行 `key` 的取值，可以是字符串或一个函数；`dataSource` 是数据数组；`columns` 是表格列的配置描述；`pagination` 是分页器，`defaultPageSize` 是默认显示条数。在 `Table` 组件下面，放入 `Modal` 模态框，用于提示当前操作是修改还是添加用户。`Modal` 中，`title` 是标题；`visible` 是对话框是否可见；`onOk` 是点击确定回调；`onCancel` 是点击遮罩层或右上角叉或取消按钮的回调。在 `Modal` 中，嵌套需要显示的 `Form` 表单组件 `UserForm`，传入 `setForm、roles 和 user`，代码如下所示：

render () { 
    
        const {  users, isShow, roles  } = this.state
        const user = this.user || { }
        const title = <Button type="primary" onClick={ () => this.showAdd()}>创建用户</Button>
    
        return (
          <Card title={ title}>
            <Table
              bordered
              rowKey="_id"
              dataSource={ users}
              columns={ this.columns}
              pagination={ { defaultPageSize: PAGE_SIZE}}
            ></Table>
    
            <Modal
              title={ user._id ? '修改用户' : '添加用户'}
              visible={ isShow}
              onOk={ this.addUpdateUser}
              onCancel={ () => { 
                this.form.resetFields()
                this.setState({  isShow: false})
              }}
            >
              <UserForm setForm={ form => this.form = form} roles={ roles} user={ user}></UserForm>
            </Modal>
          </Card>
        )
      }

1.  在 `UserForm` 组件中，通过 `prop-types` 的 `PropTypes` 进行传入数据的检查，`setForm` 是用来传递 `form` 对象的函数，`roles` 是权限数组，`user` 是用户列表。在 `componentWillMount` 生命周期中，通过 `this.props.setForm(this.props.form)` 得到传递的 `form` 表单数据。在 `render` 中，渲染表单，代码如下所示：

import React, {  PureComponent } from 'react'
    import PropTypes from 'prop-types'
    import {  Form, Select, Input } from 'antd'
    
    const Item = Form.Item
    const Option = Select.Option
    
    class UserForm extends PureComponent { 
    
      static propTypes = { 
        setForm: PropTypes.func.isRequired, 
        roles: PropTypes.array.isRequired,
        user: PropTypes.object
      }
    
      componentWillMount () { 
        this.props.setForm(this.props.form)
      }
    
      render () { 
    
        const {  roles, user } = this.props
        const {  getFieldDecorator } = this.props.form
        const formItemLayout = { 
          labelCol: {  span: 4 }, 
          wrapperCol: {  span: 15 } 
        }
    
        return (
          <Form { ...formItemLayout}>
            <Item label="用户名">
              { 
                getFieldDecorator('username', { 
                  initialValue: user.username,
                  rules: [
                    { required: true, message: '用户名必须输入'},
                    { min: 3, max: 10, message: '用户名长度在3到10位'}
                  ]
                })(
                  <Input placeholder="请输入用户名"></Input>
                )
              }
            </Item>
            { 
              user._id ? null : (
                <Item label="密码">
                  { 
                    getFieldDecorator('password', { 
                      initialValue: user.password,
                      rules: [
                        {  required: true, message: '密码必须输入'}
                      ]
                    })(
                      <Input type="password" placeholder="请输入密码"></Input>
                    )
                  }
                </Item>
              )
            }
            
            <Item label="手机号">
              { 
                getFieldDecorator('phone', { 
                  initialValue: user.phone,
                  rules: [
                    {  required: true, message: '手机号必须输入'}
                  ]
                })(
                  <Input placeholder="请输入手机号"></Input>
                )
              }
            </Item>
            <Item label="邮箱">
              { 
                getFieldDecorator('email', { 
                  initialValue: user.email,
                  rules: [
                    {  required: true, message: '邮箱必须输入'}
                  ]
                })(
                  <Input placeholder="请输入邮箱"></Input>
                )
              }
            </Item>
            <Item label="角色">
              { 
                getFieldDecorator('role_id', { 
                  initialValue: user.role_id
                })(
                  <Select>
                    { 
                      roles.map(role => <Option key={ role._id} value={ role._id}>{ role.name}</Option>)
                    }
                  </Select>
                )
              }
            </Item>
          </Form>
        )
      }
    
    }
    
    export default Form.create()(UserForm)

1.  在 `User` 组件中，定义 `addUpdateUser`，用于添加和更新用户。在方法中，通过 `setState` 设置 `isShow` 为 `false`。第一步，收集输入数据，通过 `this.form.getFieldsValue()` 获取表单数据，通过 `this.form.resetFields()` 重置表单数据，如果是更新, 需要给 `user` 指定 `_id` 属性。第二步，提交添加的请求，发起 `reqAddOrUpdateUser` 请求。第三步，更新列表显示，如果 `result.status` 为 0，说明修改或者添加用户成功，通过 `this.getUsers()` 重新获取用户列表。反之，则是修改或者添加用户失败，代码如下所示：

addUpdateUser = async () => { 
        this.setState({  isShow: false })
    
        const user = this.form.getFieldsValue()
        this.form.resetFields()
        if (this.user) { 
          user._id = this.user._id
        }
    
        const result = await reqAddOrUpdateUser(user)
        if (result.status === 0) { 
          message.success(`${ this.user ? '修改' : '添加'}用户成功！`)
          this.getUsers()
        } else { 
          message.error(`${ this.user ? '修改' : '添加'}用户失败！`)
        }
      }

1.  在 `User` 组件中，定义 `deleteUser`，用于删除指定用户。通过 `Modal.confirm` 弹出对话框，判读是否删除用户。如果是删除用户，发起请求，删除用户，重新获取用户列表。如果不是删除用户，通过 `message.info` 提示取消删除，代码如下所示：

deleteUser = (user) => { 
        Modal.confirm({ 
          title: `确认删除${ user.username}吗？`,
          onOk: async () => { 
            const result = await reqDeleteUser(user._id)
            if (result.status === 0) { 
              message.success('删除用户成功！')
              this.getUsers()
            }
          },
          onCancel: () => { 
            message.info('已取消删除用户')
          }
        })
      }

#### 二、React 结合 Antd 实现表格的渲染、新增、修改和删除的实现 ####

1.  `React` 结合 `Antd` 实现表格的渲染、新增、修改和删除的实现，完整代码如下所示：

import React, {  Component } from 'react'
    import {  Card, Button, Table, Modal, message } from 'antd'
    import LinkButton from '../../components/linkButton/index'
    import {  formateDate } from '../../utils/dateUtils'
    import {  reqUsers, reqDeleteUser, reqAddOrUpdateUser } from '../../api'
    import {  PAGE_SIZE } from '../../utils/constants'
    import UserForm from './userForm'
    
    export default class User extends Component { 
      
      state = { 
        users: [], 
        roles: [], 
        isShow: false, 
      }
    
      initColumns = () => { 
        this.columns = [
          { 
            title: '用户名',
            dataIndex: 'username'
          },
          { 
            title: '邮箱',
            dataIndex: 'email'
          },
          { 
            title: '电话',
            dataIndex: 'phone'
          },
          { 
            title: '注册时间',
            dataIndex: 'create_time',
            render: formateDate
          },
          { 
            title: '所属角色',
            dataIndex: 'role_id',
            render: (role_id) => this.roleNames[role_id]
          },
          { 
            title: '操作',
            render: (user) => (
              <span>
                <LinkButton onClick={ () => this.showUpdate(user)}>修改</LinkButton>
                <LinkButton onClick={ () => this.deleteUser(user)}>删除</LinkButton>
              </span>
            )
          }
        ]
      }
    
      initRoleNames = (roles) => { 
        const roleNames = roles.reduce((pre, role) => { 
          pre[role._id] = role.name
          return pre
        }, { })
        this.roleNames = roleNames
      }
    
      showUpdate = (user) => { 
        this.user = user
        this.setState({  isShow: true })
      } 
    
      showAdd = () => { 
        this.user = null
        this.setState({  isShow: true })
      }
    
      addUpdateUser = async () => { 
        this.setState({  isShow: false })
    
        const user = this.form.getFieldsValue()
        this.form.resetFields()
        if (this.user) { 
          user._id = this.user._id
        }
    
        const result = await reqAddOrUpdateUser(user)
        if (result.status === 0) { 
          message.success(`${ this.user ? '修改' : '添加'}用户成功！`)
          this.getUsers()
        } else { 
          message.error(`${ this.user ? '修改' : '添加'}用户失败！`)
        }
      }
    
      deleteUser = (user) => { 
        Modal.confirm({ 
          title: `确认删除${ user.username}吗？`,
          onOk: async () => { 
            const result = await reqDeleteUser(user._id)
            if (result.status === 0) { 
              message.success('删除用户成功！')
              this.getUsers()
            }
          },
          onCancel: () => { 
            message.info('已取消删除用户')
          }
        })
      }
    
      getUsers = async () => { 
        const result = await reqUsers()
        if (result.status === 0) { 
          const {  users, roles } = result.data
          this.setState({ 
            users,
            roles
          })
        }
      }
    
      componentWillMount () { 
        this.initColumns()
      }
    
      componentDidMount () { 
        this.getUsers()
      }
    
      render () { 
    
        const {  users, isShow, roles  } = this.state
        const user = this.user || { }
        const title = <Button type="primary" onClick={ () => this.showAdd()}>创建用户</Button>
    
        return (
          <Card title={ title}>
            <Table
              bordered
              rowKey="_id"
              dataSource={ users}
              columns={ this.columns}
              pagination={ { defaultPageSize: PAGE_SIZE}}
            ></Table>
    
            <Modal
              title={ user._id ? '修改用户' : '添加用户'}
              visible={ isShow}
              onOk={ this.addUpdateUser}
              onCancel={ () => { 
                this.form.resetFields()
                this.setState({  isShow: false})
              }}
            >
              <UserForm setForm={ form => this.form = form} roles={ roles} user={ user}></UserForm>
            </Modal>
          </Card>
        )
      }
    }