是否可以隐藏蚂蚁设计中空表的标题?

发布于 2025-02-04 16:10:24 字数 646 浏览 1 评论 0原文

这是我的桌子 没有数据

我的表在列上具有默认的过滤。

const columns = [
...other_columns,
    {
      title: 'Requester',
      dataIndex: 'requester',
      key: 'requester',
      width: '10%',
      defaultFilteredValue: 'User1',
      ...getColumnSearchProps('requester', searchInput, handleSearch, handleReset, filterObj),
    },
]

当表为空时,我想向用户展示另一个布局而不是表。我尝试使用表提供的locale支架,但我想隐藏标头并创建类似的东西。 ANTD会为此提供道具吗?还是可以实现这一目标? 没有数据时没有表

This is my table
Table with no data

My table has a default filtering on a column.

const columns = [
...other_columns,
    {
      title: 'Requester',
      dataIndex: 'requester',
      key: 'requester',
      width: '10%',
      defaultFilteredValue: 'User1',
      ...getColumnSearchProps('requester', searchInput, handleSearch, handleReset, filterObj),
    },
]

When the table is empty i want to show the user another layout instead of the table. I tried using locale prop that the table provides but i want to hide the header and create something like this. Does antd provide a prop for that? Or is there any hack available to achieve this? No table when no data

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

恍梦境° 2025-02-11 16:10:24

在桌子上使用Sheadheader道具

showHeader={empty ? false : true}

Use the showHeader prop on Table

showHeader={empty ? false : true}
戏舞 2025-02-11 16:10:24

如果您不想在没有数据时显示表组件,则取决于您。如果我正确,如果没有数据,您想隐藏整个桌子。在这种情况下,您可以创建一个父组件,以管理要显示的组件。这样的东西

const SomeParentComponent = (data) => {
  return data.length ? <Table columns={data} ... /> : <YourCustomComponent ... />
}

It is up to you if you don't want to show the table component when there is no data. If I got you right you want to hide the whole table if there is no data. In that case, you can create a parent component that will manage which component to show. Something like this

const SomeParentComponent = (data) => {
  return data.length ? <Table columns={data} ... /> : <YourCustomComponent ... />
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文