需求背景

做一个可以外部控制新增刷新表格  表格内部可以编辑删除 类似下方需求图

实现过程

因为我实现时有两个这样的表格  所以我的事件里面会有传参用于判断  可忽略传参判断部分   代码中有formatMessage部分为国际化可忽略 

 <div style={{ marginBottom: '10px', marginTop: '10px', display: 'flex' }}><Button type={'primary'} onClick={() => handleAddWhiteList(1)}>{formatMessage({ id: 'button.Add' })}</Button><Buttontype={'primary'}style={{ marginLeft: '10px' }}onClick={() => onRefreshWhiteList(1)}icon={<SyncOutlined />}/></div><Tablesize="small"columns={whiteColumns}dataSource={whiteDataSource}pagination={false}bordered={true}rowKey={'id'}scroll={{y: whiteDataSource?.length > 3 ? 55 * 3 : undefined, // 动态计算高度}}/>//js部分const [whiteDataSource, setWhiteDataSource] = useState([]);//白名单列表const whiteColumns = [{title: 'HOST',dataIndex: 'url',render: (text, record) => {return (<Inputvalue={record.url}disabled={record.disabled}onBlur={(e) => handleUrlBlur(e, record.id, 1)}onChange={(e) => handleUrlWhitleChange(e, record.id, 1)}placeholder={formatMessage({ id: 'label.rollCall.PleaseEnter' })}/>);},},{title: formatMessage({ id: 'label.Operation' }),dataIndex: 'operation',width: 120,render: (text, record) => {return (<Space size={'middle'}><TableButtononClick={() => handleEdit(1, record)}disabled={!record.disabled}icon={<IconBtnitemInfo={{ itemId: 'edit', title: formatMessage({ id: 'button.Edit' }) }}/>}/><TableButtonconfirmconfirmMsg={formatMessage({ id: 'confirm.Delete' })}onConfirm={() => handleDel(1, record)}icon={<IconBtnitemInfo={{ itemId: 'delete', title: formatMessage({ id: 'button.Delete' }) }}/>}/></Space>);},},];const handleAddWhiteList = (num) => {if (num == 1) {setWhiteDataSource([...whiteDataSource,{ url: '', id: Date.now(), disabled: false, error: null },]);} else {setBlackDataSource([...blackDataSource,{ url: '', id: Date.now(), disabled: false, error: null },]);}};const onRefreshWhiteList = (num) => {if (num == 1) {setWhiteDataSource(whiteDataSource.filter((item) => item.url !== ''));} else {setBlackDataSource(blackDataSource.filter((item) => item.url !== ''));}};//名单失焦事件const handleUrlBlur = (e, id, num) => {if (num == 1) {const newData = whiteDataSource.map((item) => {if (item.id === id) {return { ...item, disabled: true };}return item;});setWhiteDataSource(newData);} else {const newData = blackDataSource.map((item) => {if (item.id === id) {return { ...item, disabled: true };}return item;});setBlackDataSource(newData);}};//名单输入事件const handleUrlWhitleChange = (e, id, num) => {if (num == 1) {const newData = whiteDataSource.map((item) => {if (item.id === id) {return { ...item, url: e.target.value };}return item;});setWhiteDataSource(newData);} else {const newData = blackDataSource.map((item) => {if (item.id === id) {return { ...item, url: e.target.value };}return item;});setBlackDataSource(newData);}};
//  编辑处理函数const handleEdit = (num, record) => {if (num == 1) {setWhiteDataSource((prev) =>prev.map((item) => (item.id === record.id ? { ...item, disabled: false } : item)),);} else {setBlackDataSource((prev) =>prev.map((item) => (item.id === record.id ? { ...item, disabled: false } : item)),);}};//删除处理const handleDel = (num, record) => {if (num == 1) {setWhiteDataSource((prev) => prev.filter((item) => item.id !== record.id));} else {setBlackDataSource((prev) => prev.filter((item) => item.id !== record.id));}};