前端项目实战伍拾柒react-admin+material ui-踩坑-进行过滤操作tab全

最新推荐文章于 2024-07-23 11:18:48 发布

前端歌谣

最新推荐文章于 2024-07-23 11:18:48 发布

阅读量25

点赞数

文章标签：前端 react.js ui

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

版权

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

500 篇文章 1 订阅

订阅专栏

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

import React, { Fragment, useState } from 'react'
import { List, Datagrid, TextField, EditButton, DeleteButton, BooleanField } from 'react-admin'
import {
    makeStyles,
    useMediaQuery,
    Divider,
    Tabs,
    Tab
} from "@material-ui/core";
const GeyaoList = () => {
    const [userTab, setUserTab] = useState<any>([
        { id: true, name: "肯定" },
        { id: false, name: "否定" },
    ])
    const [flag, setFlag] = useState<any>({})
    const handleChange=(event:any,value:any)=>{
        console.log(event,value,"geyao")
        setFlag(value)
        
    }
    return (
        <Fragment>
            <Tabs
                variant="fullWidth"
                centered
                value={flag}
                indicatorColor="primary"
                onChange={handleChange}
            >
                {userTab.map((choice: any) => (
                    <Tab key={choice.id} label={choice.name} value={choice.id} />
                ))}
            </Tabs>
                  <List  exporter={false} filter={{flag}}>
                  <Datagrid>
                      <TextField source='id'></TextField>
                      <TextField source='name'></TextField>
                      <TextField source='sex'></TextField>
                      <TextField source='salary'></TextField>
                      <BooleanField source='flag'></BooleanField>
                      <EditButton></EditButton>
                      <DeleteButton></DeleteButton>
                  </Datagrid>
              </List>
        </Fragment>
    )
}
export default GeyaoList