前端项目实战陆拾叁react-admin+material ui-踩坑-List需要Datagrid中bulkActionButtons写法

最新推荐文章于 2024-07-20 18:16:53 发布

前端歌谣

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量40

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/131600956

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你加入前端巅峰人才交流群

import { Button } from '@mui/material';
import { Datagrid, BulkDeleteButton,List,TextField,BooleanField} from 'react-admin';
 import ResetViewsButton from './components/ResetViewsButton';
const PostBulkActionButtons = () => (
    <>
         <ResetViewsButton label="重置" /> 
        <BulkDeleteButton />
    </>
);
export const DatagridBulkActionList = () => (
    <List resource="t_geyao_person">
        <Datagrid bulkActionButtons={<PostBulkActionButtons />}>
        <TextField source="id" />
            <TextField source='name'></TextField>
            <TextField source='sex'></TextField>
            <TextField source='salary'></TextField>
            <BooleanField source='status'></BooleanField>
        </Datagrid>
    </List>
);

import { VisibilityOff } from '@mui/icons-material';
import { BulkUpdateButton } from 'react-admin';

const views = { views: 0 };

const ResetViewsButton = () => (
    <BulkUpdateButton label="Reset Views" data={views} icon={<VisibilityOff/>} />
);

export default ResetViewsButton;