使用antd的table生成一个表格,columns包括财务组织,hr部门,是否默认,是否默认列为checkbox,checkbox只能有一条被勾选,
时间: 2024-10-16 07:21:48 浏览: 23
antd中table展开行默认展示,且不需要前边的加号操作
5星 · 资源好评率100%
在Ant Design (antd) 中,你可以使用 `Table` 组件来创建一个包含多种列的表格。如果你想显示财务组织、HR部门以及两个复选框列(默认状态和是否允许唯一选中),可以按照以下步骤操作:
首先,确保已经安装了 antd 和 @ant-design/icons(用于复选框图标)依赖,如果还没有安装,可以通过 npm 或 yarn 安装:
```bash
npm install antd @ant-design/icons
# 或者
yarn add antd @ant-design/icons
```
然后,在组件内部,设置 columns 数组如下:
```jsx
import { Table, Checkbox, Space } from 'antd';
import CheckIcon from '@ant-design/icons/Check';
const columns = [
{
title: '财务组织',
dataIndex: 'financeOrganization',
key: 'financeOrganization',
},
{
title: 'HR部门',
dataIndex: 'hrDepartment',
key: 'hrDepartment',
},
{
title: '默认',
dataIndex: 'default',
key: 'default',
render: ({ record }) => (
<Checkbox
defaultChecked={record.isDefault}
onChange={() => handleDefaultChange(record.id)}
disabled={!canEdit(record)}
>
{record.isDefault ? <CheckIcon /> : null} 是否默认
</Checkbox>
),
// 控制单行只允许一个复选框被选中
onCell: ({ record, rowKey, rowIndex }) => ({
checkboxStrictly: true,
}),
},
// 可选列,展示其他数据
{
title: '其他列',
dataIndex: 'otherColumn',
key: 'otherColumn',
},
];
// 其他方法如 handleDefaultChange 和 canEdit 省略,这里仅示例如何处理默认值的更改和编辑权限检查
function MyTable() {
return (
<Table
columns={columns}
dataSourceyourData // 替换为实际的数据源数组
/>
);
}
export default MyTable;
```
在这个例子中,`handleDefaultChange` 函数会负责处理默认值的更新,`canEdit` 则是一个条件判断函数,确认用户是否有权限修改某一行的默认状态。
阅读全文