Closed yangda666 closed 4 months ago
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
在ProTable中 查询配置中为 collapse: true 时, form数据变化就触发了表格的 relaod
search={{ labelWidth: "auto", filterType: "light", collapse: true, }}
表单项的输入就触发了 表格的数据请求
期望在点击确定后触发表单的请求
import { EllipsisOutlined, PlusOutlined } from "@ant-design/icons"; import type { ActionType, ProColumns } from "@ant-design/pro-components"; import { ProTable, TableDropdown } from "@ant-design/pro-components"; import { Button, Dropdown, Space, Tag } from "antd"; import { useRef } from "react"; import request from "umi-request"; export const waitTimePromise = async (time: number = 100) => { return new Promise((resolve) => { setTimeout(() => { resolve(true); }, time); }); }; export const waitTime = async (time: number = 100) => { await waitTimePromise(time); }; type GithubIssueItem = { url: string; id: number; number: number; title: string; labels: { name: string; color: string; }[]; state: string; comments: number; created_at: string; updated_at: string; closed_at?: string; }; const columns: ProColumns<GithubIssueItem>[] = [ { dataIndex: "index", valueType: "indexBorder", width: 48, }, { title: "标题", dataIndex: "title", copyable: true, ellipsis: true, tooltip: "标题过长会自动收缩", formItemProps: { rules: [ { required: true, message: "此项为必填项", }, ], }, }, { disable: true, title: "状态", dataIndex: "state", filters: true, onFilter: true, ellipsis: true, valueType: "select", valueEnum: { all: { text: "超长".repeat(50) }, open: { text: "未解决", status: "Error", }, closed: { text: "已解决", status: "Success", disabled: true, }, processing: { text: "解决中", status: "Processing", }, }, }, { disable: true, title: "标签", dataIndex: "labels", search: false, renderFormItem: (_, { defaultRender }) => { return defaultRender(_); }, render: (_, record) => ( <Space> {record.labels.map(({ name, color }) => ( <Tag color={color} key={name}> {name} </Tag> ))} </Space> ), }, { title: "创建时间", key: "showTime", dataIndex: "created_at", valueType: "date", sorter: true, hideInSearch: true, }, { title: "创建时间", dataIndex: "created_at", valueType: "dateRange", hideInTable: true, search: { transform: (value) => { return { startTime: value[0], endTime: value[1], }; }, }, }, { title: "操作", valueType: "option", key: "option", render: (text, record, _, action) => [ <a key="editable" onClick={() => { action?.startEditable?.(record.id); }} > 编辑 </a>, <a href={record.url} target="_blank" rel="noopener noreferrer" key="view"> 查看 </a>, <TableDropdown key="actionGroup" onSelect={() => action?.reload()} menus={[ { key: "copy", name: "复制" }, { key: "delete", name: "删除" }, ]} />, ], }, ]; export default () => { const actionRef = useRef<ActionType>(); return ( <ProTable<GithubIssueItem> columns={columns} actionRef={actionRef} cardBordered request={async (params, sort, filter) => { console.log(sort, filter); await waitTime(2000); return request<{ data: GithubIssueItem[]; }>("https://proapi.azurewebsites.net/github/issues", { params, }); }} editable={{ type: "multiple", }} columnsState={{ persistenceKey: "pro-table-singe-demos", persistenceType: "localStorage", defaultValue: { option: { fixed: "right", disable: true }, }, onChange(value) { console.log("value: ", value); }, }} rowKey="id" search={{ labelWidth: "auto", filterType: "light", collapse: true, }} options={{ setting: { listsHeight: 400, }, }} form={{ // 由于配置了 transform,提交的参与与定义的不同这里需要转化一下 syncToUrl: (values, type) => { if (type === "get") { return { ...values, created_at: [values.startTime, values.endTime], }; } return values; }, }} f pagination={{ pageSize: 5, onChange: (page) => console.log(page), }} dateFormatter="string" headerTitle="高级表格" toolBarRender={() => [ <Button key="button" icon={<PlusOutlined />} onClick={() => { actionRef.current?.reload(); }} type="primary" > 新建 </Button>, <Dropdown key="menu" menu={{ items: [ { label: "1st item", key: "1", }, { label: "2nd item", key: "1", }, { label: "3rd item", key: "1", }, ], }} > <Button> <EllipsisOutlined /> </Button> </Dropdown>, ]} /> ); };
当前 Issue 未检测到标题,请规范填写,谢谢!
The title of the current issue is not detected, please fill in according to the specifications, thank you!
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
🐛 bug 描述
在ProTable中 查询配置中为 collapse: true 时, form数据变化就触发了表格的 relaod
search={{ labelWidth: "auto", filterType: "light", collapse: true, }}
📷 复现步骤
表单项的输入就触发了 表格的数据请求
🏞 期望结果
期望在点击确定后触发表单的请求
💻 复现代码
© 版本信息
🚑 其他信息