每日一练29：antd-design框架搭建表格功能-增删功能

最新推荐文章于 2025-03-31 10:34:49 发布

那是遇知吧

最新推荐文章于 2025-03-31 10:34:49 发布

阅读量745

点赞数

分类专栏： React

本文链接：https://blog.youkuaiyun.com/weixin_41406727/article/details/115863420

版权

这篇博客介绍了如何利用antd-design框架搭建具备增删功能的表格。在创建新增用户按钮、表单modal并实现点击确定后数据清空的过程中，遇到了问题。通过设置`destroyOnClose`属性和`Form`的`preserve`属性为`false`，解决了modal关闭后表单数据残留的问题。然而，还需手动清空数据以确保数据不会在下次打开时显示。文中提到了modal和Form组件的使用，并提及了antd-design的LocaleProvider进行国际化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说下功能是表格数据展示，点击增加会出来一个表单弹框，删除用户直接调接口删除就行

1：首先写个新增用户按钮

import {PlusOutlined} from '@ant-design/icon'

<Button icon={<PlusOutlined/>} type="primary" onClick={()=>{showModal()}>新增用户<Button>

2：写个表单modal

import React,{useState} from 'react'
import {modal,Form,Input,Cascader} from 'antd'
const [isFlag,setFlag] = useState<Boolean>(false)//是否
const [isModalFlag,setModalFlag] = useState<Boolean>(false)//modal是否显示

const [isUserName,setName] = useState<String>()//用户名字
const [isUserPlace,setUserPlace] = useState<String>()//用户地区

const [isTableData,setTableData] = useState<any>([])//表格数据
const [errorTip,setErrorTip] = useState<any>({
userplaceText:''
userNameText:''
})//表单modal错误提示

{isFlag &&