ANT DESIGN 只允许在一侧进行表格转移。
在Ant Design中，如果你想要在表格中进行行转移，只能在同一侧进行转移，而不能在两侧同时进行。这是因为Ant Design的表格组件设计如此。
以下是一个示例代码，演示了如何在Ant Design中使用表格进行行转移：
import React, { useState } from 'react';
import { Table, Button } from 'antd';
const data = [
{ key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
{ key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
{ key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
{ key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' },
];
const App = () => {
const [leftData, setLeftData] = useState(data);
const [rightData, setRightData] = useState([]);
const handleTransfer = (record) => {
const newLeftData = leftData.filter(item => item.key !== record.key);
const newRightData = [...rightData, record];
setLeftData(newLeftData);
setRightData(newRightData);
};
const leftColumns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{
title: 'Action',
key: 'action',
render: (text, record) => (
),
},
];
const rightColumns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
];
return (
Left Table
Right Table
);
};
export default App;
以上代码中，我们使用了useState来管理左侧表格的数据和右侧表格的数据。handleTransfer函数用于处理点击转移按钮时的逻辑，将选中的行从左侧表格移除，并添加到右侧表格。
在渲染表格时，我们分别传入左侧表格的数据和列配置到 注意，这只是一个简单的示例，你可以根据实际需求进行更复杂的操作和样式调整。组件的
dataSource和columns属性。右侧表格只需要传入右侧表格的数据和列配置。
相关内容