List需要Datagrid进行包裹
import React from "react" import { Datagrid, DatagridBody, List,BooleanField, TextField, RecordContextProvider } from 'react-admin'; import { TableCell, TableRow, Checkbox } from '@mui/material'; const MyDatagridRow = ({ record, id, onToggleItem, children, selected, selectable }) => ( <RecordContextProvider value={record}> <TableRow> {/* first column: selection checkbox */} <TableCell padding="none"> {selectable && ( <Checkbox checked={selected} onClick={event => onToggleItem(id, event)} /> )} </TableCell> {/* data columns based on children */} {React.Children.map(children, field => ( <TableCell key={`${id}-${field.props.source}`}> {field} </TableCell> ))} </TableRow> </RecordContextProvider> ); const MyDatagridBody = props => <DatagridBody {...props} row={<MyDatagridRow />} />; const MyDatagrid = props => <Datagrid {...props} body={<MyDatagridBody />} />; const DatagridBodyList = () => ( <List resource="t_geyao_person"> <MyDatagrid> <TextField source="id" /> <TextField source='name'></TextField> <TextField source='sex'></TextField> <TextField source='salary'></TextField> <BooleanField source='status'></BooleanField> </MyDatagrid> </List> ) export default DatagridBodyList;
运行结果