antd 相关问题

在某些div中显示antd模态掩码

通常，当您打开模态时，遮罩（即模态后面的黑色背景）会覆盖整个屏幕。 如果我想在某些div中渲染黑色对话框，如下图所示，我该如何实现？ （r...

上传句柄更改列表antd继续加载

我从其他团队得到了一个项目。问题是使用 antd 上传文件和图像。一切正常，但是当上传 pdf 文件时，进度条会永远加载，但是当我单击 subm 时...

如何清除 Antd 表单中的 Datepicker 值？

如果触发按钮位于具有 Datepicker 的同一 Form.Item 内，则它可以工作，但如果按钮位于 datepicker 外部则无法清除。 我基本上尝试在提交后清除日期选择器。 很奇怪，我无法理解...

Antd UI 库。覆盖空数据上的 <Table /> 行为

如果接收到空数据数组，我想渲染一些其他内容。目前它只显示“无数据”，但我想在那里放置一些自定义组件。 如何做到这一点？ 如果 <Table /> 接收到空数据数组，我想渲染一些其他内容。 目前它只显示'No data'，但我想在那里放置一些自定义组件。 如何做到这一点？ table 有一个属性，locale。这是一个object，用于define以下事情： filterConfirm、filterReset、emptyText。 如果 emptyText 是 text，请使用 data 指定要显示的 empty。像这样： let locale = { emptyText: 'Abc', }; <Table locale={locale} dataSource={dataSource} columns={columns} /> 查看文档：https://ant.design/components/table/ 还有另一种方法可以做到这一点，无需触及 locale 属性： 用 <Table /> 包裹 <ConfigProvider /> 并设置 renderEmpty 属性： <ConfigProvider renderEmpty={() => <Empty description="Custom message"/>}> <Table /> </ConfigProvider> renderEmpty函数可以返回任何你想要的组件。 更多详细信息请参见：https://ant.design/components/config-provider/#API 文档示例：https://ant.design/components/empty/#components-empty-demo-config-provider 您可以使用 antd table 的 locale 属性，即 Object。 您可以传递 string 标签，而不是仅将 emptyText 传递给 HTML。 let locale = { emptyText: ( <span> <p> <Icon type="like" /> Custom Message </p> <Button>Custom Button</Button> </span> ) }; <Table locale={locale} dataSource={dataSource} columns={columns} /> 可以使用区域设置。空文本可以直接给出。 <Table locale={{emptyText:"No data"} dataSource={dataSource} columns={columns} /> ant design 网站上有很好的解释。这是链接https://ant.design/components/empty/ 查看以下示例，该示例使用了 antd 的 <Result/> 组件 应用程序.jsx import React from "react"; import "./index.css"; import { Button, Table, Result } from "antd"; const App = () => { const columns = [ { title: "Name", dataIndex: "name", key: "name" }, { title: "Age", dataIndex: "age", key: "age" }, { title: "Address", dataIndex: "address", key: "address" }, { title: "Tags", key: "tags" } ]; const data = []; let locale = { emptyText: ( <Result title="No data" subTitle="No users have been created yet, Click on add button to create a new user" extra={[ <Button type="primary">Add user</Button>, <Button>Cancel</Button> ]} /> ) }; return ( <> <Table locale={locale} columns={columns} dataSource={data} /> </> ); }; export default App; 输出： <Table className='myTasksTable' columns={TaskColumns} dataSource={myTasks} pagination={false} rowSelection={{ type: selectionType, ...rowSelection, }} scroll={{ y: tableHeight }} locale={{ emptyText: ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No Tasks Available" /> ), }} /> 类似这个解决方案的东西会更改描述，但同时保留旧图标，这样你就不必从你自己的图标中添加一个，或者你喜欢你可以更改它

Ant Design 主题切换动画【React】

我使用 Ant Design UI 组件库，我注意到有一个选项可以提供令人印象深刻的主题更改动画。当您切换时，您可以在图书馆的页面 https://ant.design/ 上看到它...

为什么 try...catch 在渲染函数中不起作用？

这只是一个示例，不是我的原始代码。我在 App 组件的渲染函数中编写了一个 try...catch 块。在应用程序组件中，我想渲染一个 antd 表。有时在我Ta的数据中...

Ant Design Layout 未按预期工作

我有一个 React 应用程序。我决定使用 Ant Design 添加布局。我按照下面的例子。 https://2x.ant.design/components/layout/#components-layout-demo-custom-trigger 这是我的

我们可以向 ANTD form.submit 事件传递额外的参数吗？

这里是一些关于antd form的代码，我在onFinish属性中调用handleFinish并在按钮单击时调用form.submit函数，就像我们通常触发f的handleFinish函数一样...

在 antd 5 中混合搭配水平和垂直表单样式

我有一个表单，我想处于垂直模式。 其中有一排带有一堆复选框。我认为复选框在水平方向上看起来很糟糕，所以我想使用垂直布局只是为了......

更改antd中的日期格式<DatePicker />

我正在提交一个表单以将数据发送到我的 API，该 API 接收格式为 YYYY-MM-DD 的日期，但默认情况下 DatePicker 组件会在日期末尾添加额外的时间字符，例如

如何在React组件中使用antddivider来分隔屏幕的两侧？

我正在使用 antd，并且希望垂直分隔线将屏幕的两侧分开。两侧实际上由不同的 Col 组件分隔开。它们目前看起来像这样： c...

蚂蚁选择。有时不出现列表弹出窗口

使用ant Select，我写了一个组件，它有两种模式。 首先：它需要选择数据的选项。并显示它（这部分工作正常）。 第二：它需要一个 select_url 和组合...

Antd：如何将工具提示添加到表格的列标题

我想为表格的每个列标题添加自定义工具提示 我尝试使用标题工具提示，但这不会在整个单元格区域触发 { 标题： } 有没有简单的方法...

Next js 13.5.1 中的“使用客户端”问题仍然在服务器端得到响应

我在最新版本的 next js 13.5.3 中使用“使用客户端”，但组件仍然从服务器端渲染，并且也很难在 next js 中同时使用 tailwind 和 antd 有人知道这个吗

类型错误：无法设置未定义的属性（设置“钩子”）

TypeError：无法设置未定义的属性（设置“hook”） 我正在开发 Nextjs 应用程序，但使用 antd 库时出现此错误。我正在使用模态组件和工具提示组件

解决 Ant Design 3x 模态确认中“否”和模态关闭（X）不同的值

我正在使用 Ant Design 3X 模式确认来在我的 React 应用程序中显示确认模式。我需要根据用户与模式的交互来解析具有不同值的 Promise：

如何创建自定义Upload itemRender Antd

我在Reactjs应用程序中使用antD组件，我正在使用Upload组件上传图像，现在我想使用自定义itemRender，它可以很好地显示和删除以前上传的图像...

Antd Datepicker 中的所有日期在传递值时都会被选中

当使用 Ant Design 中的 DatePicker 组件并使用 value 属性设置其值时，弹出日历中的所有日期都会以蓝色突出显示，就像它们被选中一样。 将光标移至...

滚动到第一个错误 antd 表单时标签不可见

滚动到第一个错误时，只有字段和错误消息可见。有没有办法添加偏移量以使标签也可见？ 滚动到第一个错误时，只有字段和错误消息可见。有没有办法添加偏移量以使标签也可见？ <Form form={form} name="addBasicProjectInfo" onFinish={onFinish} autoComplete="off" layout="vertical" colon={false} className="flex flex-col gap-7" scrollToFirstError > 您可以将配置传递给 scrollToFirstError 属性。该 API 类似于 scroll-into-view-if-needed，因为这就是 Ant 表单在底层使用的内容。 在这种情况下，您可能需要类似以下内容。 scrollToFirstError: { block: 'center', behavior: 'smooth', scrollMode: 'if-needed', boundary: (parent) => !parent.classList.contains({scroll-container-class}), } 当我们使用boundary时，手动定义block: 'center'非常重要，以防止视口中出现任何意外的滚动。您可以在这里阅读有关boundary的更多信息。

Antd：如何更改表格排序器上的工具提示标签

我是 Antd 的新手，我创建了一个具有排序功能的表，但我需要更改排序器工具提示上的文本。 排序器工具提示：- 预先感谢，如果您需要任何额外的代码片段...