前端项目实战壹佰贰拾柒react-admin+material ui-react-admin之FilterList之使用

我是歌谣 这里是歌谣的前端笔记小屋 想加入前端巅峰人才交流群私信我 

import { SavedQueriesList, FilterLiveSearch, FilterList, FilterListItem,List,Datagrid } from 'react-admin';
import { Card, CardContent } from '@mui/material';
import MailIcon from '@mui/icons-material/MailOutline';
import CategoryIcon from '@mui/icons-material/LocalOffer';
 
export const RFilterListG = () => (
    <Card sx={{ order: -1, mr: 2, mt: 9, width: 200 }}>
        <CardContent>
            <SavedQueriesList />
            <List resource="t_geyao_person" exporter={false}>
         <Datagrid>
             <FilterLiveSearch />  
             <FilterList label="Subscribed to newsletter" icon={<MailIcon />}>
                <FilterListItem label="Yes" value={{ has_newsletter: true }} />
                <FilterListItem label="No" value={{ has_newsletter: false }} />
            </FilterList>
            <FilterList label="Category" icon={<CategoryIcon />}>
                <FilterListItem label="Tests" value={{ category: 'tests' }} />
                <FilterListItem label="News" value={{ category: 'news' }} />
                <FilterListItem label="Deals" value={{ category: 'deals' }} />
                <FilterListItem label="Tutorials" value={{ category: 'tutorials' }} />
            </FilterList>
             </Datagrid>
             </List>
        </CardContent>
    </Card>
);

运行结果