需求背景

做一個可以外部控制新增刷新表格? 表格內部可以編輯刪除 類似下方需求圖

實現過程

因為我實現時有兩個這樣的表格? 所以我的事件里面會有傳參用于判斷? 可忽略傳參判斷部分? ?代碼中有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));}};