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

最新推荐文章于 2024-04-11 15:47:14 发布
最新推荐文章于 2024-04-11 15:47:14 发布
阅读量1.5k 收藏 6
点赞数 1
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43477721/article/details/117933079
版权

在这里插入图片描述

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 的数字变化

在这里插入图片描述

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

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

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

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

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

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

  const paginationChange = (pagination) => {
    console.log(pagination)
    setPagination(pagination)
  }

  useEffect(() => {
    // 请求函数
    requestList(pagination)
  }, [pagination])

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

export default City

到此一步，基本的数据展示与数据删除就可以了。

接下来添加按钮，用于实现 model 框的显示与隐藏，同时进行组件的封装，将添加信息的组件封装在一起。

import React, { useState, useEffect } from 'react'
import { Table, Modal, Pagination, Button, Form, Select, Input} from 'antd';

const City = () => {
  const [visible, setVisible] = useState(false)

  const handleClick = () => {
    setVisible(true)
  }

    const onCreate = (values) => {
    setVisible(false);
  }

  return (
    <div>
      <Button type="primary" onClick={handleClick}>添加信息</Button>
      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        pagination={false}
        columns={columns}
        dataSource={dataSource}
      />
      <Pagination onChange={paginationChange} defaultCurrent={1} total={50} />
      <Modal title="删除确认框" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <h1>确认是否删除？</h1>
      </Modal>
      <Information
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  );
}

const Information = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm()
  return (
    <Modal
      visible={visible}
      okText="确认"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <p>model</p>
    </Modal>
  )
}

export default City

在这里插入图片描述
在 model 框中填入 form 表单，model 框中的 onCreate 函数可以接收填写的内容。

// export default City
import React, { useState, useEffect } from 'react'
import { Table, Modal, Pagination, Button, Form, Select, Input } from 'antd';

const City = () => {
  const [visible, setVisible] = useState(false)

  const handleClick = () => {
    setVisible(true)
  }

  const onCreate = (values) => {
    console.log('onCreate', values)
    setVisible(false);
  }

  return (
    <div>
      <Button type="primary" onClick={handleClick}>添加信息</Button>
      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        pagination={false}
        columns={columns}
        dataSource={dataSource}
      />
      <Pagination onChange={paginationChange} defaultCurrent={1} total={50} />
      <Modal title="删除确认框" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <h1>确认是否删除？</h1>
      </Modal>
      <Information
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  );
}

const Information = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm()
  return (
    <Modal
      visible={visible}
      okText="确认"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="id"
          label="选择城市"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Select style={{ width: 100 }}>
            <Select.Option value={12443}>洛阳市</Select.Option>
            <Select.Option value={11443}>北京市</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="franchisee_name"
          label="授权加盟商"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Input type="text" placeholder="请输入姓名" />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default City

在这里插入图片描述
可以在 onCreate 函数请求后端的接口，将填写的数据保存在数据库中。

在这里插入图片描述

import React, { useState, useEffect } from 'react'
import { Card, Button, Table, Form, Select, Modal, Input, message, Pagination } from 'antd'
import axios from '../../axios/index'
import Utils from '../../utils/utils'

const FormItem = Form.Item
const Option = Select.Option

const City = () => {
  const [visible, setVisible] = useState(false)
  const [list, setList] = useState([])
  const [pagination, setPagination] = useState(1)
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false)

  const onCreate = (values) => {
    let sys_user_name = JSON.parse(localStorage.getItem('bikeCMS'))
    setVisible(false);
    axios.ajax({
      url: '/city/openCity',
      data: {
        params: {
          sys_user_name,
          ...values
        }
      }
    }).then((res) => {
      if (res.status === 200 && res.code === 0) {
        message.info(res.result);
        requestList()
      }
    })
  }

  const requestList = (pagination) => {
    axios.ajax({
      url: '/city/list',
      data: {
        params: {
          page: pagination
        }
      }
    }).then((res) => {
      let list = res.result.item_list.map((item, index) => {
        item.key = index;
        return item;
      });
      setList(list)
    })
  }

  useEffect(() => {
    requestList(pagination)
  }, [pagination])

  const columns = [
    {
      title: '城市ID',
      dataIndex: 'id'
    }, {
      title: '城市名称',
      dataIndex: 'name'
    }, {
      title: '用车模式',
      dataIndex: 'mode',
      render(mode) {
        return mode === 1 ? '停车点' : '禁停区';
      }
    }, {
      title: '营运模式',
      dataIndex: 'op_mode',
      render(op_mode) {
        return op_mode === 1 ? '自营' : '加盟';
      }
    }, {
      title: '授权加盟商',
      dataIndex: 'franchisee_name'
    }, {
      title: '城市管理员',
      dataIndex: 'city_admins',
      render(arr) {
        return arr.map((item) => {
          return item;
        }).join(' , ');
      }
    }, {
      title: '城市开通时间',
      dataIndex: 'open_time',
      render: Utils.formateDate
    }, {
      title: '操作时间',
      dataIndex: 'update_time',
      render: Utils.formateDate
    }, {
      title: '操作人',
      dataIndex: 'sys_user_name'
    }
  ]

  const onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys)
    showModal()
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const paginationChange = (pagination) => {
    setPagination(pagination)
  }

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

  const handleOk = () => {
    let delDataId = list[selectedRowKeys]
    console.log(delDataId)
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div style={{ width: '100%' }}>
      <Card style={{ marginTop: 10, paddingTop: 15 }}>
        <Button
          type="primary"
          onClick={() => {
            setVisible(true);
          }}
        >
          开通城市
        </Button>
      </Card>
      <Card>
        <div className="content-wrap">
          <Table
            bordered
            columns={columns}
            dataSource={list}
            pagination={false}
            rowSelection={rowSelection}
          />
          <div className="pagination" style={{ float: 'right', marginTop: 20 }}>
            <Pagination onChange={paginationChange} defaultCurrent={1} total={10 * (pagination + 1)} />
          </div>
        </div>
      </Card>
      <Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>确认删除？</p>
      </Modal>
      <OpenCity
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  )
}

const OpenCity = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm()
  return (
    <Modal
      visible={visible}
      title="开通城市"
      okText="确认"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="id"
          label="选择城市"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Select style={{ width: 100 }}>
            <Option value={12443}>洛阳市</Option>
            <Option value={11443}>北京市</Option>
            <Option value={14644}>厦门市</Option>
            <Option value={14643}>广州市</Option>
            <Option value={14443}>深圳市</Option>
            <Option value={14244}>柳州市</Option>
            <Option value={84244}>合肥市</Option>
            <Option value={74244}>南昌市</Option>
            <Option value={45244}>大同市</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="op_mode"
          label="营运模式"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}>
          <Select style={{ width: 100 }}>
            <Option value={1}>自营</Option>
            <Option value={2}>加盟</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="mode"
          label="用车模式"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Select style={{ width: 100 }}>
            <Option value={1}>指定停车点</Option>
            <Option value={2}>禁停区</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="franchisee_name"
          label="授权加盟商"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Input type="text" placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item
          name="city_admins"
          label="城市管理员"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Input type="text" placeholder="请输入姓名" />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default City

文章的代码有点多，都是可以直接复制粘贴看效果的。对于管理系统而言，无非都是一些表格的显示与操作。使用 UI 组件库，可以大大减少开发的时间，还是蛮方便的。

👉👉👉👉：木兰君 / 共享单车后台管理系统

关注大明贵妇公众号
在这里插入图片描述

获取 react + antd 实战视频资料（回复共享单车后台管理系统） 🎁🎁🎁

淘淘是只狗
关注
专栏目录
C# Winform 开源UI库
lvxingzhe3的博客
06-21 3590
C# Winform 开源UI库，轻松开发Winform绚丽界面
react-使用antd实现表格增删编辑分别基于react162和react163实现两种方式
08-15
使用antd实现表格增、删、编辑，分别基于react16.2和react16.3实现两种方式
又双叒叕一个Ant Design的Vue轮子(vue-antd-ui)
weixin_34049948的博客
04-23 3434
例行惯例，欢迎来波star： 仓库地址：vueComponent/ant-design 官方网站：A UI Design Language 为何造这个轮子： 用惯了Antd，再看其他的总觉得没有Antd好用 周边生态，组件数量及质量都是略胜一筹，至于样式，每个人的审美不一样，就不加评判了，不过个人还是喜欢antd的。 社区很多Antd的Vue实现，大多已经弃坑，已经实现的也多是阉割版 githu...
antd table 添加行，编辑行，删除行
热门推荐
chunlijian1152的博客
06-13 1万+
目标 添加行：点击添加行，当有行在编辑并未进行保存时提示先保存；表格行中未有未保存的内容时，表格最后加一行，并可以输入内容，当点击取消时，整行删除不保存。 删除行：所在行删除 保存行：保存所在行 详细代码 index.js import React from 'react'; import...
ant 树形表格的增删
pyf18809486818的博客
11-23 1674
最近用ant 的树表格做功能，实现了树表格的增删改查。 首先来看需求。树表格最多五层，可以编辑。渲染后台传过来的数据，也可以新增树，同级别，或者子级。 一开始因为新增的子或者同级别没有固定的ID，然后树表格要有一个唯一的rowkey。这里不能用index,父级的index从0开始增加，子级别也是。所以开始要构造一个唯一的key. 首先给每个元素增加key,类似'0','0_0','0_0_0'这种最多五级。注意这些参数不能单纯的想做index,因为后面删除功能可能会删掉‘0_0’,'0_1'就变成了子
react+ant design实现Table的增、删、改的示例代码
10-17
主要介绍了react+ant design实现Table的增、删、改的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
antd-ui-components
02-04
【antd-ui-components】是一个基于Ant Design的UI组件库，它为开发者提供了丰富的前端组件，用于构建用户界面。Ant Design是一个广泛使用的React UI框架，它强调了设计的一致性、可用性和可扩展性，使得开发高质量的...
antd-mobile-react17:antd-mobile react17
05-25
1. 丰富的组件库：Antd-Mobile提供了一系列符合Material Design规范的移动端组件，如按钮、表格、导航栏等，简化了UI设计和开发过程。 2. 响应式布局：所有组件都具有良好的响应式设计，适应不同屏幕尺寸的设备。 3....
管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管.zip
02-25
【标题】"管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管理框架"揭示了这是一个使用特定技术栈构建的后台管理系统。它主要基于Vue.js，利用Vue CLI 4（Vue.js的命令行工具）进行快速...
AntdUI-WInForm UI库
最新发布
05-06
3. **易用性**：AntdUI遵循.NET Framework的编程模型，开发者可以使用C#或VB.NET等.NET语言轻松集成和使用。API设计友好，使得组件的配置和事件处理直观简单。 4. **响应式布局**：虽然主要用于桌面应用，但AntdUI...
使用UI组件库antd
richest_qi的博客
05-24 443
npm install --save antd，安装antd。 App.js中引入antd的样式文件，引入antd的Button组件。 import React, { Component } from 'react' import { Button } from 'antd'; // import 'antd/dist/antd.css'; import 'antd/dist/antd.min.css' export default class App extends Component { r.
vue3 antd table表格的增删改查（三）实现删除的数据的行样式修改【后台管理系统 纯前端rowClassName更改行样式】
XSL_HR的博客
12-25 4246
vue3 antd table表格的增删改查——通过rowClassName➕deep样式穿透➕css不可控操作，实现删除了的数据的行样式修改
antdui table的行 操作————antd-vue
陈嗯嗯的博客
04-22 361
<a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth: 40 }" :columns="columns" :data-source="LXRlist" :scroll="{ x: 1600, y:selectShow?'calc(100vh - 376px...
使用antd UI组件有感
weixin_34186931的博客
10-10 193
公司使用的的react.js的版本提14.7的，JS版本使用的是ES6语法，因此在使用antd过程中，有些许不愉快的记录，分享给大家，一起学习： 如果是react 14.7版本时，使用getFieldDecorator API时会后错，直接使用getFieldProps代替，即可 this.props.form 中含有大量的方法，可以去这里调用 刚开始使用大部分的报错是因为antd中的方法都没有...
第2章、Antd UI框架
weixin_44121341的博客
04-11 329
Antd UI框架的使用
基于ant.design做一个可编辑的table表格，且实现可校验样式、增加、删除数据
吃瓜群众的博客
02-03 5709
主要利用Form.List的field进行拓展，结合table使用 嵌套表单字段需要对 field 进行拓展，将 field.name 和 field.fieldKey 应用于控制字段。 // 只贴关键代码 const onFinish = (values)=>{ console.log(values) // 可以得到table } <Form initialValues={ {table:[{name:'lily'},{name:'lisa'}]} } onFinish={ onFi
ant design vue table单元格编辑，点击全部显示可编辑单元
qq_43468165的博客
02-11 5677
以及表格中使用select数据刷新页面不更新问题
antdv中table表头最后一列为新增按钮，渲染出来的数据最后一列是删除按钮
一株木樨的博客
04-25 1287
需求：要求表头最后一列为新增，点击新增按钮，可以插入数据，并可以对当前插入的数据进行删除操作。 当table表格中的数据全部删除完时，删除按钮消失，只能点击新增按钮来新增数据。 页面展示： 点击新增按钮：出来一条数据并填写 点击删除按钮： 代码实现： table的表头：主要是{customRender: ‘operation’, title: ‘Title’} { //title: <a-button onClick={() => this.addForm()}&g
使用vue 用antd ui写一个表格嵌套表格
05-12
你可以使用Ant Design Vue的Table组件和Expandable组件来实现表格嵌套表格的功能。 首先，你需要在你的Vue项目中安装和引入Ant Design Vue和其样式。 然后，你可以使用Ant Design Vue的Table组件来创建你的主表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值