javascript - Ant Design - 按其所有现有数据过滤列

Question

在Ant Design Table我如何根据所有现有数据过滤列？

例如 - 在此表中 - https://codesandbox.io/s/ww1lpn4k4l有 3 个不同的名称，您可以按其中两个进行过滤，因为它们在 filters 属性中定义了它们。我希望能够自动过滤所有 3 个名称(或更多)，这意味着 - 无需指定它们。

我怎样才能做到这一点？

Answer 1

你可以定义辅助函数关闭数据，并返回格式化值:

const filterData = data => formatter => data.map( item => ({
      text: formatter(item),
      value: formatter(item)
  });

接下来，在您的列定义中:

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  filters: filterData(data)(i => i.name),
  // ...

子菜单逻辑有点复杂，但是你可以这样做:

const splitName = index => dataItem => dataItem.name.split(" ")[index];

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  filters: [
    ...filterData(data)(splitName(0)),
    {
      text: 'Submenu',
      value: 'Submenu',
      children: filterData(data)(splitName(1))
    }
  ],

希望对您有所帮助。