ProTable 搜索列设置指南 - 如何在 ProTable 中添加搜索功能

"ProTable<TableListItem, TableListPagination> 如何设置搜索列内容：您可以通过设置 ProTable 组件的 search 属性来设置搜索列。search 属性是一个对象数组，每个对象代表一个搜索列，包含以下属性：\n\n- dataIndex: 指定搜索列对应的数据字段名。\n- title: 指定搜索列的标题。\n- valueType: 指定搜索列的值类型，可以是 'text', 'select', 'date' 等。\n- render: 自定义搜索列的渲染方法。\n\n下面是一个示例代码，展示如何设置搜索列：\n\n\nimport { ProTable } from \'@ant-design/pro-table\';\n\nconst searchColumns = [\n {\n dataIndex: \'name\',\n title: \'姓名\',\n valueType: \'text\',\n },\n {\n dataIndex: \'age\',\n title: \'年龄\',\n valueType: \'digit\',\n },\n {\n dataIndex: \'gender\',\n title: \'性别\',\n valueType: \'select\',\n valueEnum: {\n male: { text: \'男\', status: \'Default\' },\n female: { text: \'女\', status: \'Processing\' },\n },\n },\n];\n\nconst TableList = () => {\n return (\n \<ProTable\<TableListItem, TableListPagination\>\n search={{\n filterType: \'light\',\n searchText: \'搜索\',\n resetText: \'重置\',\n placeholder: \'请输入搜索内容\',\n collapseRender: () => false,\n span: 6,\n columns: searchColumns,\n }}\n // 其他属性...\n \>\n );\n};\n\n\n在上面的示例中，我们定义了一个名为 searchColumns 的搜索列配置数组，包含了三个搜索列：姓名、年龄和性别。然后通过将 searchColumns 数组作为 search 属性的 columns 值传递给 ProTable 组件，来设置搜索列。\n\n在实际使用中，您可以根据具体需求来自定义搜索列的配置，包括标题、值类型、值枚举等。