表格管理---React
一、页面展示
二、使用到的小方法
A、自定义的函数方法
1、colunms
功能：用于生成表格的列表配置对象。接收过滤后的数据、更新过滤后的函数、全选状态、更新状态的函数，已勾选行的键数组以及更新该数组的函数作为参数。
本代码使用到的部分：
// 表格列配置
const columns = (filteredDataSource, setFilteredDataSource, isAllChecked, setIsAllChecked, checkedKeys, setCheckedKeys) => [
{
title: (
<Checkbox
checked={isAllChecked}
onChange={(e) => {
const newChecked = e.target.checked;
setIsAllChecked(newChecked);
if (newChecked) {
setCheckedKeys(filteredDataSource.map(item => item.key));
} else {
setCheckedKeys([]);
}
}}
/>
),
dataIndex: '',
render: (_, record) => (
<Checkbox
checked={checkedKeys.includes(record.key)}
onChange={(e) => {
const newCheckedKeys = e.target.checked
? [...checkedKeys, record.key]
: checkedKeys.filter(key => key !== record.key);
setCheckedKeys(newCheckedKeys);
setIsAllChecked(newCheckedKeys.length === filteredDataSource.length);
}}
/>
)
},
{
title: '接口名称',
dataIndex: 'interfaceName',
key: 'interfaceName',
},
{
title: '接口描述',
dataIndex: 'interfaceDesc',
key: 'interfaceDesc'
},
{
title: '接口分类',
dataIndex: 'interfaceCategory',
key: 'interfaceCategory'
},
{
title: '接口来源',
dataIndex: 'interfaceSource',
key: 'interfaceSource'
},
{
title: 'API状态',
dataIndex: 'apiStatus',
key: 'apiStatus'
},
{
title: '更新时间',
dataIndex: 'updateTime',
key: 'updateTime',
sorter: (a, b) => new Date(a.updateTime).getTime() - new Date(b.updateTime).getTime(),
// 时间排序
sortDirections: ['descend', 'ascend']
},
{
title: '操作',
dataIndex: 'operation',
key: 'operation',
render: (_, record) => { //render函数的作用
const handlePublish = () => {
// 模拟发布成功
setFilteredDataSource((prevData) =>
prevData.map((item) =>
item.key === record.key ? { ...item, apiStatus: '已发布' } : item
)
);
};
const handleStop = () => {
// 模拟停用操作
setFilteredDataSource((prevData) =>
prevData.map((item) =>
item.key === record.key ? { ...item, apiStatus: '已停用' } : item
)
);
};
if (record.apiStatus === '未发布') {
return (
<div>
<Button onClick={handlePublish}>发布</Button>
<Button>接口测试</Button>
<Button>编辑</Button>
<Button>删除</Button>
</div>
);
} else if (record.apiStatus === '已发布') {
return (
<div>
<Button onClick={handleStop}>停用</Button>
<Button>接口测试</Button>
</div>
);
} else if (record.apiStatus === '已停用') {
return (
<div>
<Button onClick={handlePublish}>发布</Button>
<Button>接口测试</Button>
<Button>编辑</Button>
</div>
);
} else if (record.apiStatus === '草稿') {
return (
<div>
<Button>编辑</Button>
<Button>删除</Button>
</div>
);
} else {
return null;
}
}
}
];2、OnSearch （搜索函数）
功能：根据输入的接口来源、API状态和接口名称对原始数据进行过滤，并更新filteredDataSource 状态。同时将全选状态和以勾选行的键数重置。
本代码使用到的部分
// 查询实现
const onSearch = () => {
let filteredData = dataSource; // 初始化过滤后的数据为原始数据
if (interfaceSource) {
// 根据接口来源过滤数据
filteredData = filteredData.filter(item => item.interfaceSource === interfaceSource);
}
if (apiStatus) {
filteredData = filteredData.filter(item => item.apiStatus === apiStatus);
}
if (interfaceName) {
filteredData = filteredData.filter(item => item.interfaceName.includes(interfaceName));
}
setFilteredDataSource(filteredData);
setIsAllChecked(false);
setCheckedKeys([]);
};3、onReset (重置功能)
功能：将接口来源输入框内容、API状态和接口名称重置为空，再恢复成原始数据，与此同时，还需要恢复全选状态和勾选行状态（如果有勾选）
涉及代码块
// 重置实现
const onReset = () => {
setInterfaceSource('');
setApiStatus('');
setInterfaceName('');
setFilteredDataSource(dataSource);
setIsAllChecked(false);
setCheckedKeys([]);
};4、新增接口模态框
功能：当点击需要触发的按钮，此时就会弹出这个模态框。将新增接口模态框的显示状态 visible 设置为 true，从而显示模态框。将新增接口模态框的显示状态 visible 设置为 false，关闭模态框，并将选中的分类重置为空。检查是否选择了分类，如果未选择则给出提示；如果选择了分类，则可以执行实际的接口新增逻辑，最后关闭模态框并重置选中的分类。
// 显示新增接口模态框
const showModal = () => {
setVisible(true);
};
// 关闭新增接口模态框
const handleCancel = () => {
setVisible(false);
setSelectedCategory('');
};
// 提交新增接口信息
const handleOk = () => {
if (!selectedCategory) {
// 分类未选择，给出提示
console.log('请选择分类');
return;
}
// 这里可以添加实际的接口新增逻辑
console.log('新增接口，分类：', selectedCategory);
setVisible(false);
setSelectedCategory('');
};
B、Ant Design组件的内置方法
1、Select组件、Input组件、Checkbox组件中的Onchange方法
功能：当用户选择下拉框中的选项时触发，用于更新相应的状态。
功能：当用户在输入框中输入内容时触发，用于更新接口名称的状态。
功能：当用户勾选或取消勾选复选框时触发，用于更新全选状态和已勾选行的键数组。
涉及代码块：
{/* 查询区域 */}
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
<span>数据来源：</span>
<Select
onChange={(value) => setInterfaceSource(value)}
value={interfaceSource}
>
<Option value="数据服务">数据服务</Option>
<Option value="指标管理">指标管理</Option>
<Option value="决策引擎">决策引擎</Option>
</Select>
<span style={{ marginLeft: 16 }}>api发布状态：</span>
<Select
onChange={(value) => setApiStatus(value)}
value={apiStatus}
>
<Option value="已发布">已发布</Option>
<Option value="已停用">已停用</Option>
<Option value="未发布">未发布</Option>
<Option value="草稿">草稿</Option>
</Select>
<span style={{ marginLeft: 16 }}>接口名称：</span>
<Input
placeholder="接口名称"
value={interfaceName}
onChange={(e) => setInterfaceName(e.target.value)}
style={{ width: 200, marginLeft: 8 }}
/>
<Checkbox
checked={isAllChecked}
onChange={(e) => {
const newChecked = e.target.checked;
setIsAllChecked(newChecked);
if (newChecked) {
setCheckedKeys(filteredDataSource.map(item => item.key));
} else {
setCheckedKeys([]);
}
}}
/>
2、Table组件的sorter方法
功能：对表格的某一列进行排序，此代码中排序的内容是更新时间
涉及代码块：
{
title: '更新时间',
dataIndex: 'updateTime',
key: 'updateTime',
sorter: (a, b) => new Date(a.updateTime).getTime() - new Date(b.updateTime).getTime(),
sortDirections: ['descend', 'ascend']
}