Material-table是否支持单列selectbox多数据搜索功能咨询

Material-Table完全支持单列通过下拉选择框实现多数据搜索的效果，你需要的带勾选的下拉多选筛选功能可以通过自定义列筛选属性实现，无需引入额外的第三方组件。

核心实现逻辑 #

• 利用列配置的filterComponent属性自定义渲染筛选区域的UI，直接使用MUI原生的多选Select组件即可实现你示例中的下拉勾选效果
• 通过列配置的customFilter属性编写匹配规则，判断当前行的对应字段值是否在用户选中的筛选项数组中
• 开启表格全局的filtering配置项，确保列筛选功能正常显示

最小可运行代码示例 #

import { Select, MenuItem, Checkbox, ListItemText } from '@mui/material';
import MaterialTable from 'material-table';

export default function FilterTable() {
  const tableColumns = [
    {
      title: '数据分类',
      field: 'type',
      // 自定义下拉多选筛选组件
      filterComponent: ({ columnDef, onFilterChanged }) => (
        <Select
          multiple
          variant="standard"
          value={columnDef.filterValue || []}
          onChange={(e) => onFilterChanged(columnDef.tableData.id, e.target.value)}
          renderValue={(selected) => selected.join('、')}
          style={{ width: '100%' }}
        >
          {/* 下拉选项可根据你的业务数据动态生成 */}
          {['分类1', '分类2', '分类3', '分类4'].map((option) => (
            <MenuItem key={option} value={option}>
              <Checkbox checked={columnDef.filterValue?.includes(option) || false} />
              <ListItemText primary={option} />
            </MenuItem>
          ))}
        </Select>
      ),
      // 自定义筛选匹配规则
      customFilter: (filterVal, rowData) => {
        if (!filterVal || filterVal.length === 0) return true;
        return filterVal.includes(rowData.type);
      }
    },
    // 其余列配置按需补充
    { title: '名称', field: 'name' },
    { title: '数值', field: 'value' }
  ];

  return (
    <MaterialTable
      title="下拉多选筛选示例"
      columns={tableColumns}
      data={[
        { type: '分类1', name: '条目1', value: 12 },
        { type: '分类2', name: '条目2', value: 34 },
        { type: '分类3', name: '条目3', value: 56 }
      ]}
      options={{
        filtering: true, // 必须开启全局筛选开关
        search: false
      }}
    />
  )
}

扩展优化建议 #

如果需要在下拉框内增加搜索输入框快速定位筛选项，可以将Select替换为MUI的Autocomplete组件，开启多选配置即可实现输入关键词过滤下拉选项的效果，完全匹配你示例的交互需求。

内容的提问来源于stack exchange，提问作者Shota Donguzashvili