时间戳

首页 > 解决方案 > 使 antd 表格行仅在单击时可见

javascript - 使 antd 表格行仅在单击时可见

问题描述

我有简单的 antd 表，其中列“状态”、“标题”和三行，我不知道如何显示：默认情况下没有特定行，并通过单击按钮使其可见，例如当用户进入表时默认情况下有三行，但我想将行'value === OrderState.Delivered'默认设置为'display：hidden'，但是当用户点击'Delivered'按钮时它应该是可见的并且当用户点击'All states ' 按钮，那么除了相同的 'value === OrderState.Delivered' 之外，所有内容都应该可见。这是我的代码，你可以试试： https ://codesandbox.io/s/dreamy-surf-t9eh3?file=/src/Test.js:1345-1355

标签： javascriptcssreactjstypescriptantd

解决方案

这些是我对您的代码所做的更改

  • 默认情况下过滤 eventsData 以不显示已交付的

    const [filteredEventsData, setFilteredEventsData] = useState(
  eventsData.filter((f) => f.key !== "Delivered")
);

  • 在filterData函数中，即使点击了所有状态，也会过滤掉传递

    function filterData(filter) {
  if (filter) {
    setFilteredEventsData(eventsData.filter((f) => f.key === filter));
  } else {
    setFilteredEventsData(eventsData.filter((f) => f.key !== "Delivered"));
  }
}

推荐阅读