如何在 CUBA 平台的 DataTable 中更改过滤器答案

【问题标题】：How to change filter in CUBA Platform's DataTable如何在 CUBA 平台的 DataTable 中更改过滤器
【发布时间】：2021-12-29 16:49:58
【问题描述】：

在前端，我有一个由字段构建的 DataTable。我需要将一列的过滤器类型从选择更改为输入字段。这可能与CUBA的DataTable有关吗？我无权访问 ColumnsDefinitions 道具

【问题讨论】：

标签： reactjs antd cuba-platform

【解决方案1】：

CUBA 前端生成器基于DataTable 和fields 属性（已弃用）创建表组件。 DataTable 的用法可以很容易地转换为使用更现代的columDefinitions，它可以更好地控制每一列。

作为第一步，我们可以简单地将相同的字符串数组fields 与columnDefinitions 属性一起传递。

 <DataTable
        dataCollection={this.dataCollection}
        columnDefinitions={this.fields}
        onRowSelectionChange={this.handleRowSelectionChange}
        hideSelectionColumn={true}
        buttons={buttons}
      />

然后我们可以将数组中只需要的字段从字符串更改为列定义。

  ownerColumnDefinition: ColumnDefinition<Pet> = {
    field: "owner",
    columnProps: {}
  }

  fields: (string | ColumnDefinition<Pet>)[] = [
    "identificationNumber",
    "birthDate",
    "name",
    "type",
    this.ownerColumnDefinition
  ];

然后按照Ant Design Customized Filter中的描述实现antd filterDropdown

  ownerColumnDefinition: ColumnDefinition<Pet> = {
    field: "owner",
    columnProps: {
      filterDropdown: () => {/* custom filter implementation here */}
    }
  }

基于https://github.com/vadimbasko/cuba-petclinic-custom-table-filter 上的CUBA Petclinic 应用程序的完整示例，您可以在owner 列https://github.com/vadimbasko/cuba-petclinic-custom-table-filter/blob/0f8e7e62779d0afb0fbd733dfffabf26df754f68/modules/front/src/app/pet/PetList.tsx#L29-L70 的PetList 组件中看到带有输入字段的自定义过滤器。

【讨论】：