🐛[BUG] 在ProTable中 查询配置中为 collapse: true 时, form数据变化就触发了表格的 relaod
yangda666 opened this issue · comments
提问前先看看:
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,
}}
📷 复现步骤
表单项的输入就触发了 表格的数据请求
🏞 期望结果
期望在点击确定后触发表单的请求
💻 复现代码
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>,
]}
/>
);
};
© 版本信息
- ProComponents 版本: [e.g. 4.0.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]
🚑 其他信息
以下的 Issues 可能会帮助到你 / The following issues may help you
- [#8502][🐛[BUG] 在ProTable中 查询配置中为 collapse: true 时, form数据变化就触发了表格的 relaod][100%]
想请教:该案例代码中,配置disable: true有何作用? @yangda666