Antd Pro Table 删除默认搜索按钮并实施去抖动

Question

我正在使用 antd pro 做一个项目。对于 table 使用 antd pro table。 antd pro的实现代码 table --

<PageHeaderWrapper title={false}>
  <ProTable
   actionRef={actionRef}
   request={(params, sorter, filter) => getAllData({ ...params, sorter, filter })}
   columns={columns}
   rowSelection={false}
   scroll={{ x: 'max-content' }}
   style={{ marginBottom: '10em' }}
 />
</PageHeaderWrapper>

const columns = [
    {
      title: 'Title',
      dataIndex: 'title',
      hideInForm: true,
      width: '20vw',
      hideInSearch: true
    },
    {
      title: 'Description',
      dataIndex: 'description',
      hideInSearch: true,
      width: '30vw',
      hideInSearch: true,
    },
    {
      title: 'Image',
      dataIndex: 'sliderImage',
      hideInSearch: true,
      width: '15vw',
      render: (_, record) => (
        <img
          src={record.thumbnailUrl}
          onError={(e) => (e.target.src = 'https://picsum.photos/id/1002/200/300')}
          alt="nothing"
          width="96"
          height="64"
          style={{cursor:"pointer"}}
          onClick={()=>console.log('slider image',record.record)}
        />
      ),
    },
    {
      title: 'Edit',
      key: 'edit',
      hideInSearch: true,
      render: (_, record) => (
        <Button type="primary" width="10vw" onClick={() => console.log('click')}>
          Edit
        </Button>
      ),
    },
    {
      title: 'Delete',
      key: 'delete',
      hideInSearch: true,
      render: (_, record) => (
        <Button type="primary" danger width="10vw" onClick={() => console.log('click')}>
          Delete
        </Button>
      ),
    },
];

这样的视图https://i.stack.imgur.com/JVqG0.png

这两个重置和查询按钮是默认给定的。我有两个问题。
首先，如何删除这两个按钮？
其次，我想在搜索部分实现去抖动。目前，如果我删除 {hideInSearch:true} 它将显示一个输入字段。我怎样才能在这里实现去抖动？

Answer 1

要删除“查询”和“重置”按钮，请将 search={false} 添加到 <ProTable> 组件：

<ProTable
   search={false}  // here
   actionRef={actionRef}
   request={(params, sorter, filter) => getAllData({ ...params, sorter, filter })}
   columns={columns}
   rowSelection={false}
   scroll={{ x: 'max-content' }}
   style={{ marginBottom: '10em' }}
 />

Antd Pro Table 删除默认搜索按钮并实施去抖动

Antd Pro Table remove default search buttons and Implement Debounce

reactjs

antd

ant-design-pro