使用antd的table生成一个表格,columns包括财务组织,hr部门,是否默认,是否默认列为checkbox,是否默认只能有一条被勾选,如果取消勾选,则可以选择其他行的是否默认
时间: 2024-10-16 14:21:55 浏览: 7
要在Ant Design (antd) 中创建一个表格,首先需要安装必要的依赖并了解如何配置表格组件。以下是使用`Table`组件和`Form.Checkbox`实现你描述的需求的一个示例:
1. 安装依赖:
```bash
npm install antd
```
2. 引入所需的库和组件:
```jsx
import React from 'react';
import { Table, Form, Checkbox } from 'antd';
```
3. 创建一个简单的表格组件,名为`DefaultCheckboxTable`:
```jsx
const columns = [
{
title: '财务组织',
dataIndex: 'financeDepartment',
},
{
title: 'HR部门',
dataIndex: 'hrDepartment',
},
{
title: '是否默认',
key: 'default', // 设置一个独一无二的key
render: (text, record) => (
<Form.Check
defaultChecked={record.default}
onChange={(e) => handleCheckboxChange(e, record)} // 处理勾选变化
/>
),
},
];
// 其他列...
function handleCheckboxChange(e, record) {
// 当前记录的id,假设是 record.id
const selectedIds = [...selectedIds]; // 存储已勾选记录id
if (!e.target.checked) {
// 如果取消勾选,从已选id中移除
selectedIds.splice(selectedIds.indexOf(record.id), 1);
} else {
// 如果勾选,确保只有一个默认选项,删除其他默认项
if (selectedIds.length > 0 && selectedIds[0] !== record.id) {
selectedIds.forEach(id => {
if (id === record.id) return;
tableInstance.toggleRowSelection({ key: id });
});
}
selectedIds.push(record.id);
}
// 更新数据模型,这里假设data是一个数组,每个对象都有'default'属性
updateDataRecord(record.id, { default: selectedIds.length > 0 });
}
const data = ... // 数据源,每个对象应包含 financeDepartment, hrDepartment, 和 default 属性
class DefaultCheckboxTable extends React.Component {
tableInstance = null;
componentDidMount() {
this.tableInstance = this.table Instance; // 获取表格实例以便操作选择
}
render() {
return (
<Table
ref={instance => (this.tableInstance = instance)}
columns={columns}
dataSource={data}
/>
);
}
}
export default DefaultCheckboxTable;
```
在这个例子中,`handleCheckboxChange`函数负责处理复选框的状态更新,确保最多有一个默认项,并允许用户取消勾选后选择其他行。记得将`updateDataRecord`和`data`替换为你实际的数据管理和获取方式。
阅读全文