使用antd的table生成一个表格,columns包括财务组织,hr部门,是否默认,是否默认为checkbox,是否默认永远只能有一条数据被勾选,
时间: 2024-10-17 11:07:57 浏览: 35
在Ant Design (antd) 中创建一个包含财务组织、HR部门列以及复选框的表格,你可以按照以下步骤操作:
首先,确保已经安装了`antd`库,如果没有安装,可以使用npm或yarn安装:
```bash
npm install antd
# 或者
yarn add antd
```
然后,在React组件中,你可以这样做:
```jsx
import { Table, Input, Checkbox } from 'antd';
const columns = [
{
title: '财务组织',
dataIndex: 'financeDepartment',
key: 'financeDepartment',
},
{
title: 'HR部门',
dataIndex: 'hrDepartment',
key: 'hrDepartment',
},
// 添加一个复选框列
{
title: '是否默认',
dataIndex: 'isDefault',
key: 'isDefault',
render: (text, record) => (
<Checkbox defaultChecked={record.isDefault} onChange={() => handleCheckboxChange(record.id)} />
),
// 控制只能有一个默认项
onCell: ({ row }) => ({
isDisabled: !row.isDefault || !selectedRows.includes(row.id),
}),
},
];
// 假设你已经有了一个数据数组data,每个对象都有financeDepartment, hrDepartment和isDefault属性
function handleCheckboxChange(id) {
const selectedRows = [...selectedRows];
if (selectedRows.includes(id)) {
selectedRows.splice(selectedRows.indexOf(id), 1);
} else {
selectedRows.push(id);
}
// 更新状态或其他操作...
setSelectedRows(selectedRows);
}
const App = () => {
const [selectedRows, setSelectedRows] = React.useState([]);
return (
<Table
columns={columns}
dataSource={data}
selection={{ type: 'checkbox', onChange: handleCheckboxChange }}
// 如果需要,添加额外的表格配置,如 pagination, loading等
/>
);
};
export default App;
```
在这个例子中,`handleCheckboxChange`函数用于处理复选框的状态变化,并通过`onCell`属性限制只有当某行不是默认值或者不在已选择列表中时才能被选中。
阅读全文