需要在table columns中使用render属性来手动渲染AntD开关,并使用state来保存开关状态。
示例代码:
import React, { useState } from 'react';
import { Table, Switch } from 'antd';
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
status: true,
},
{
key: '2',
name: 'Jim Green',
age: 42,
status: false,
},
];
const App = () => {
const [tableData, setTableData] = useState(data);
const handleStatusChange = (record) => {
const newData = [...tableData];
const index = newData.findIndex((item) => record.key === item.key);
const item = newData[index];
newData.splice(index, 1, { ...item, status: !item.status });
setTableData(newData);
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Status',
dataIndex: 'status',
key: 'status',
render: (text, record) => (
handleStatusChange(record)} />
),
},
];
return
;
};
export default App;