使用 Antd-UI 实现对表格的增删操作

Antd 是一个很优秀的组件库
这篇文章使用 Antd 的 Model 组件和 Table 组件，实现对表格的增删操作。

首先来看一个基本的 Table 组件

import React from 'react'
import {
    Table } from 'antd'

// 数据源 ===> 一般都是从后端提供的接口中获取数据
const dataSource = [
  {
   
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
   
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

// 展示在页面上的列数项，有几个对象，就有几列
const columns = [
  {
   
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
   
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
   
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

const City = () => {
   
  return (
    <Table dataSource={
   dataSource} columns={
   columns} />
  )
}

export default City

但是光有数据展示还不够，我们希望可以对数据进行点击选择操作

Table 组件上有一个 rowSelection 属性上的 onChange 事件，可以监听到每一次点击选择的表格项。

import React, {
    useState } from 'react'
import {
    Table } from 'antd';

// 数据源 ===> 一般都是从后端提供的接口中获取数据
const dataSource = [
  {
   
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
   
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

// 展示在页面上的列数项，有几个对象，就有几列
const columns = [
  {
   
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
   
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
   
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

const rowSelection = {
   
  onChange: (selectedRowKeys, selectedRows) => {
   
    console.log(`selectedRowKeys: ${
     selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
};

const City = () => {
   
  const [selectionType, setSelectionType] = useState('checkbox');

  return (
    <div>
      <Table
        rowSelection={
   {
   
          type: selectionType,
          ...rowSelection,
        }}
        columns={
   columns}
        dataSource={
   dataSource}
      />
    </div>
  );
}

export default City

得到了相对应的表格列表项之后，就可以请求后端的删除数据接口，对选中的数据进行删除。当然，删除数据是一项很危险的操作，我们有必要在真正删除之前提示操作者。

添加 Model 框提示，在操作者点击确认按钮时，进行真正的删除操作。

import React, {
    useState } from 'react'
import {
    Table, Modal } from 'antd';

const City = () => {
   
  const [selectionType, setSelectionType] = useState('checkbox');
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectedData, setSelectedData] = useState([])

  const showModal = () => {
   
    setIsModalVisible(true);
  };

  const handleOk = () => {
   
    console.log('selectedData', selectedData)
    // 获取数据，进行删除操作
    setIsModalVisible(false);
  };

  const handleCancel = () => {
   
    setIsModalVisible(false);
  };

  const rowSelection = {
   
    onChange: (selectedRowKeys, selectedRows) => {
   
      setSelectedData(selectedRows)
      showModal()
    },
  };

  return (
    <div>
      <Table
        rowSelection={
   {
   
          type: selectionType,
          ...rowSelection,
        }}
        columns={
   columns}
        dataSource={
   dataSource}
      />
      <Modal title="删除确认框" visible={
   isModalVisible} onOk={
   handleOk} onCancel={
   handleCancel}>
        <h1>确认是否删除？</h1>
      </Modal>
    </div>
  );
}

export default City

当数据过多时，需要进行分页操作。

PS：应该是我自身的问题，我不太清楚怎么通过 table 自带的分页去获取对应的页码数。所以我选择了使用 Antd 中 Pagination 组件

通过 Pagination 组件上的 onChange 事件，监听 pagination 的数字变化