react使用antd的table生成一个表格,columns包括财务组织,hr部门,是否默认,是否默认列为checkbox,是否默认这一列只能单选
时间: 2024-10-16 19:22:08 浏览: 19
react-antd table树形数据默认展开行实现jsx文件
在 React 应用中,使用 Ant Design 的 Table 组件创建表格,可以按照以下步骤完成:
首先,确保已安装了 `antd` 和 `react` 相关依赖:
```bash
npm install antd react
```
然后,在组件内,你可以这样做:
```jsx
import React from 'react';
import { Table, Column, FormattedMessage } from 'antd';
import { Checkbox, Space } from 'antd/lib/checkbox';
const { ColumnType } = Table;
// 假设你的数据结构如下:
const data = [
{
financialOrganization: '财务部',
hrDepartment: '人力资源部',
isDefault: true,
},
// 更多数据...
];
class CustomTable extends React.Component {
state = {
selectedRowKeys: [], // 存储默认选中项
};
handleCheckboxChange = (key) => {
const newRowKeys = [...this.state.selectedRowKeys];
if (newRowKeys.includes(key)) {
newRowKeys.splice(newRowKeys.indexOf(key), 1); // 移除已选中项
} else {
newRowKeys.push(key); // 添加选中项
}
this.setState({ selectedRowKeys: newRowKeys }, () => {
// 如果你想限制只有一个默认项,可以根据需要在此判断并移除其他项
});
};
render() {
const columns = [
{
title: '财务组织',
dataIndex: 'financialOrganization',
},
{
title: 'HR部门',
dataIndex: 'hrDepartment',
},
{
title: '默认',
dataIndex: 'isDefault',
width: '180px', // 设置列宽度
render: ({ record }) => (
<Checkbox
defaultChecked={record.isDefault === true && this.state.selectedRowKeys.length <= 1}
onChange={() => this.handleCheckboxChange(record.key)}
/>
),
},
// 如果需要添加更多列...
];
return (
<Table
dataSource={data}
columns={columns}
rowKey={(record) => record.id} // 假设每个条目都有一个 id
rowSelection={{
type: 'radio', // 表示单选模式
selectedRowKeys: this.state.selectedRowKeys,
onChange: this.handleCheckboxChange, // 当选择发生改变时触发此函数
}}
/>
);
}
}
export default CustomTable;
```
在这个例子中,我们设置了 `rowSelection.type` 为 `'radio'`,表示单选模式,并在 "默认" 列的 `render` 函数里,根据当前选中项数量控制复选框的初始状态。当你点击这个复选框时,`handleCheckboxChange` 会确保只有一项被选中。
请注意,如果数据结构或需求发生变化,你需要相应地调整代码。现在你应该有了一个既能显示组织、部门信息又能单选默认项目的表格。
阅读全文