proTable 自定义搜索项
proTable 是一个基于 Ant Design Pro 的高级表格组件,可以方便地自定义搜索项。以下是一些常见的自定义搜索项示例:
- 输入框搜索项:
import { ProFormText } from '@ant-design/pro-form';
import { Input } from 'antd';
<ProFormText
name="username"
label="用户名"
placeholder="请输入用户名"
/>
// 或者使用自定义的输入框
<ProFormText
name="username"
label="用户名"
fieldProps={{
component: <Input placeholder="请输入用户名" />,
}}
/>
- 下拉框搜索项:
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,
}}
/>
- 时间范围搜索项:
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 还支持更多自定义选项,可以根据具体需求进行调整
原文地址: https://www.cveoy.top/t/topic/hKv4 著作权归作者所有。请勿转载和采集!