react hooks 和antd 两个table表格,第一个表格里选中信息添加到第二个表格里,如果第二个表格里有这条信息,在第一个表格中则不可选中,可以写一个demo吗
时间: 2024-03-27 15:37:03 浏览: 17
好的,这里给你一个简单的demo,使用React Hooks和Antd库实现:
```jsx
import React, { useState } from 'react';
import { Table, Button } from 'antd';
const columns = [
{ title: '姓名', dataIndex: 'name' },
{ title: '年龄', dataIndex: 'age' },
{ title: '性别', dataIndex: 'gender' }
];
const data = [
{ key: '1', name: '小明', age: 18, gender: '男' },
{ key: '2', name: '小红', age: 20, gender: '女' },
{ key: '3', name: '小刚', age: 22, gender: '男' },
{ key: '4', name: '小美', age: 19, gender: '女' }
];
const Demo = () => {
const [selectedRows, setSelectedRows] = useState([]);
const [tableData, setTableData] = useState(data);
const onSelectChange = (selectedRowKeys, selectedRows) => {
setSelectedRows(selectedRows);
};
const addSelectedRows = () => {
setTableData(prevData => {
const newData = prevData.filter(item => !selectedRows.some(row => row.key === item.key));
return [...newData, ...selectedRows];
});
setSelectedRows([]);
};
const rowSelection = {
onChange: onSelectChange,
selectedRowKeys: selectedRows.map(row => row.key)
};
return (
<div>
<div style={{ marginBottom: 16 }}>
<Button type="primary" onClick={addSelectedRows} disabled={!selectedRows.length}>
添加选中行
</Button>
</div>
<Table columns={columns} dataSource={tableData} rowSelection={rowSelection} />
</div>
);
};
export default Demo;
```
这个demo包含两个表格,第一个表格是默认显示的,第二个表格是根据用户选择的行动态生成的。用户在第一个表格中选择行时,可以通过`selectedRows`状态来保存选中的行数据。当用户点击“添加选中行”按钮时,会将选中的行添加到第二个表格中。注意,需要先判断选中的行是否已经存在于第二个表格中,如果存在则不能重复添加。在第二个表格中可以再次选择行,但是已经存在于第一张表格中的行将不能再次选择。