表格管理---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'] }