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

一、React 结合 Antd 实现表格的渲染、新增、修改和删除引入所需相关的组件和文件，代码如下所示：import React, { Component } from 'react'import { Card, Button, Table, Modal, message } from 'antd'import LinkButton from '../../components/linkButto

浮生离梦

7099人浏览 · 2021-03-21 22:55:42

浮生离梦 · 2021-03-21 22:55:42 发布

一、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'

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

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

在 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>
        )
      }
    ]
  }

在 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 })
  }

在 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
      })
    }
  }

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

componentWillMount () {
    this.initColumns()
  }

  componentDidMount () {
    this.getUsers()
  }

在 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>
    )
  }

在 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)

在 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 ? '修改' : '添加'}用户失败！`)
    }
  }

在 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 实现表格的渲染、新增、修改和删除的实现

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>
    )
  }
}