proTable 是一个基于 Ant Design Pro 的高级表格组件,可以方便地自定义搜索项。以下是一些常见的自定义搜索项示例:

  1. 输入框搜索项:
import { ProFormText } from '@ant-design/pro-form';
import { Input } from 'antd';

<ProFormText
  name="username"
  label="用户名"
  placeholder="请输入用户名"
/>

// 或者使用自定义的输入框
<ProFormText
  name="username"
  label="用户名"
  fieldProps={{
    component: <Input placeholder="请输入用户名" />,
  }}
/>
  1. 下拉框搜索项:
import { ProFormSelect } from '@ant-design/pro-form';
import { Select } from 'antd';

<ProFormSelect
  name="status"
  label="状态"
  options={[
    { label: '启用', value: 'enable' },
    { label: '禁用', value: 'disable' },
  ]}
/>

// 或者使用自定义的下拉框
<ProFormSelect
  name="status"
  label="状态"
  fieldProps={{
    options: [
      { label: '启用', value: 'enable' },
      { label: '禁用', value: 'disable' },
    ],
    placeholder: '请选择状态',
    showSearch: true,
    allowClear: true,
  }}
/>
  1. 时间范围搜索项:
import { ProFormDateRangePicker } from '@ant-design/pro-form';
import { DatePicker } from 'antd';

<ProFormDateRangePicker
  name="createDate"
  label="创建日期"
  initialValue={[]}
  fieldProps={{
    renderExtraFooter: () => 'extra footer',
    picker: 'date',
  }}
/>

// 或者使用自定义的日期选择器
<ProFormDateRangePicker
  name="createDate"
  label="创建日期"
  initialValue={[]}
  fieldProps={{
    renderExtraFooter: () => 'extra footer',
    picker: 'date',
    showTime: true,
    format: 'YYYY-MM-DD HH:mm:ss',
  }}
/>

以上示例只是一些常见的自定义搜索项,proTable 还支持更多自定义选项,可以根据具体需求进行调整

proTable 自定义搜索项

原文地址: https://www.cveoy.top/t/topic/hKv4 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录