当前位置： 首页 > news >正文

项目实战--权限列表

news 来源：原创 2025/5/1 0:40:06

后端数据：

用表格实现权限列表

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

<Table dataSource={dataSource} columns={columns} />;

可以通过dataIndex这个值决定将来要将哪一项显示在table列中

设置好看的圆角按钮：

<Button type="primary" shape="circle" icon={<SearchOutlined />} />
import React,{useState,useEffect} from 'react';
import { Button,Table, Tag } from 'antd';
import { EditOutlined,DeleteOutlined } from '@ant-design/icons';
import axios from 'axios';

function RightList() {
    const [dataSource,setdataSource]=useState([])
    useEffect(()=>{
        axios.get("http://localhost:3000/rights").then(res=>{
          setdataSource(res.data)
       })
    },[])
    const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
          render:(id)=>{
            return <b>{id}</b>
          }
        },
        {
          title: '权限名称',
          dataIndex: 'title',
        },
        {
          title: '权限路径',
          dataIndex: 'key',
          render:(key)=>{
            return <Tag color='orange'>{key}</Tag>
          }
        },
        {
          title: '操作',
          render:(key)=>{
            return <div>
               <Button type="primary" shape="circle" icon={<EditOutlined />} />
               <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} />
            </div>
          }
        },
      ];
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} />
        </div>
    );
}

export default RightList;

这个实现的看分页器或者滚动条

如果不用滚动条的话还可以使用分页器

Table表格数据实现树形结构

表格是支持树形数据的展示的，当数据中有children字段的时候会自动的展示为树形表格，如果不需要或者配置为其他字段则可以用childrenColumnName进行配置

可以通过设置indentSize以控制每一层的缩进宽度

import React,{useState,useEffect} from 'react';
import { Button,Table, Tag } from 'antd';
import { EditOutlined,DeleteOutlined } from '@ant-design/icons';
import axios from 'axios';

function RightList() {
    const [dataSource,setdataSource]=useState([])
    useEffect(()=>{
        axios.get("http://localhost:3000/rights?_embed=children").then(res=>{
          const list = res.data
          list[0].children = ""
          setdataSource(res.data)
       })
    },[])
    const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
          render:(id)=>{
            return <b>{id}</b>
          }
        },
        {
          title: '权限名称',
          dataIndex: 'title',
        },
        {
          title: '权限路径',
          dataIndex: 'key',
          render:(key)=>{
            return <Tag color='orange'>{key}</Tag>
          }
        },
        {
          title: '操作',
          render:(key)=>{
            return <div>
               <Button type="primary" shape="circle" icon={<EditOutlined />} />
               <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} />
            </div>
          }
        },
      ];
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
              //一页显示几条数据
              pageSize:5
            }}/>
        </div>
    );
}

export default RightList;

 

把children字段改一下首页就不会展开了

 添加气泡框

使用对话框和气泡框都可以实现想要的效果

import React,{useState,useEffect} from 'react';
import { Button,Table, Tag,Modal } from 'antd';
import { EditOutlined,DeleteOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
const { confirm } = Modal;

function RightList() {
    const [dataSource,setdataSource]=useState([])
    useEffect(()=>{
        axios.get("http://localhost:3000/rights?_embed=children").then(res=>{
          const list = res.data
          list[0].children = ""
          setdataSource(res.data)
       })
    },[])
    const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
          render:(id)=>{
            return <b>{id}</b>
          }
        },
        {
          title: '权限名称',
          dataIndex: 'title',
        },
        {
          title: '权限路径',
          dataIndex: 'key',
          render:(key)=>{
            return <Tag color='orange'>{key}</Tag>
          }
        },
        {
          title: '操作',
          render:(record)=>{
            return <div>
               <Button type="primary" shape="circle" icon={<EditOutlined />}/>
               <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} onClick=
               {()=>confirmMethod(record)}/>
            </div>
          }
        },
      ];
      const confirmMethod = (record) => {
        confirm({
          title: 'Do you Want to delete these items?',
          icon: <ExclamationCircleOutlined />,
          onOk() {
            console.log('OK',record);
          },
          onCancel() {
            console.log('Cancel');
          },
        });
        console.log('确认删除')
      };
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
              //一页显示几条数据
              pageSize:5
            }}/>
        </div>
    );
}

export default RightList;

删除还要同步一下后端的数据，以及之前的一种写死的写法要做出改进，否则删除完一个之后其他的不支持展开了：

import React,{useState,useEffect} from 'react';
import { Button,Table, Tag,Modal } from 'antd';
import { EditOutlined,DeleteOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
const { confirm } = Modal;

function RightList() {
    const [dataSource,setdataSource]=useState([])
    useEffect(()=>{
        axios.get("http://localhost:3000/rights?_embed=children").then(res=>{
          const list = res.data
          // list[0].children = ""  不建议写死
          list.forEach(item=>{
            if(item.children.length===0){
              item.children = ""
            }
          })
          setdataSource(list)
       })
    },[])
    const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
          render:(id)=>{
            return <b>{id}</b>
          }
        },
        {
          title: '权限名称',
          dataIndex: 'title',
        },
        {
          title: '权限路径',
          dataIndex: 'key',
          render:(key)=>{
            return <Tag color='orange'>{key}</Tag>
          }
        },
        {
          title: '操作',
          render:(record)=>{
            return <div>
               <Button type="primary" shape="circle" icon={<EditOutlined />}/>
               <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} onClick=
               {()=>confirmMethod(record)}/>
            </div>
          }
        },
      ];
      const confirmMethod = (record) => {
        confirm({
          title: 'Do you Want to delete these items?',
          icon: <ExclamationCircleOutlined />,
          onOk() {
            deleteMethod(record)
          },
          onCancel() {
            console.log('Cancel');
          },
        });
        console.log('确认删除')
      };

      const deleteMethod = (record) => {
        console.log(record)
        //同步状态  页面
        setdataSource(dataSource.filter(item=>item.id!==record.id))
        //同步状态  后端
        axios.delete(`http://localhost:3000/rights/${record.id}`)
      }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
              //一页显示几条数据
              pageSize:5
            }}/>
        </div>
    );
}

export default RightList;

但是现在的代码删除children会出现问题

删除孩子就是根据id这个属性向后端发请求

import React,{useState,useEffect} from 'react';
import { Button,Table, Tag,Modal } from 'antd';
import { EditOutlined,DeleteOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
import { data } from 'react-router-dom';
const { confirm } = Modal;

function RightList() {
    const [dataSource,setdataSource]=useState([])
    useEffect(()=>{
        axios.get("http://localhost:3000/rights?_embed=children").then(res=>{
          const list = res.data
          // list[0].children = ""  不建议写死
          list.forEach(item=>{
            if(item.children.length===0){
              item.children = ""
            }
          })
          setdataSource(list)
       })
    },[])
    const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
          render:(id)=>{
            return <b>{id}</b>
          }
        },
        {
          title: '权限名称',
          dataIndex: 'title',
        },
        {
          title: '权限路径',
          dataIndex: 'key',
          render:(key)=>{
            return <Tag color='orange'>{key}</Tag>
          }
        },
        {
          title: '操作',
          render:(record)=>{
            return <div>
               <Button type="primary" shape="circle" icon={<EditOutlined />}/>
               <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} onClick=
               {()=>confirmMethod(record)}/>
            </div>
          }
        },
      ];
      const confirmMethod = (record) => {
        confirm({
          title: 'Do you Want to delete these items?',
          icon: <ExclamationCircleOutlined />,
          onOk() {
            deleteMethod(record)
          },
          onCancel() {
            console.log('Cancel');
          },
        });
        console.log('确认删除')
      };

      const deleteMethod = (record) => {
        console.log(record);
    
        if (record.grade === 1) {
            // 删除一级权限
            //同步状态  页面
            setdataSource(dataSource.filter(item => item.id !== record.id));
            //同步状态  后端
            axios.delete(`http://localhost:3000/rights/${record.id}`);
        } else {
            // 找到对应的父级权限
            //用map
            let list = dataSource.map(item => {
                if (item.id === record.rightId) {
                    //修正children为数组
                    return {
                        ...item,
                        children: Array.isArray(item.children) ? 
                            item.children.filter(child => child.id !== record.id) 
                            : []
                    };
                }
                return item;
            });
            //同步状态
            setdataSource(list);
            axios.delete(`http://localhost:3000/children/${record.id}`);
        }
    };

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
              //一页显示几条数据
              pageSize:5
            }}/>
        </div>
    );
}

export default RightList;

需要注意的是要修改children为数组，避免filter方法出错

点击气泡框：

 

有些没有权限的就禁用：

import React,{useState,useEffect} from 'react';
import { Button,Table, Tag,Modal,Popover, Switch } from 'antd';
import { EditOutlined,DeleteOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
import { data } from 'react-router-dom';
const { confirm } = Modal;

function RightList() {
    const [dataSource,setdataSource]=useState([])
    useEffect(()=>{
        axios.get("http://localhost:3000/rights?_embed=children").then(res=>{
          const list = res.data
          // list[0].children = ""  不建议写死
          list.forEach(item=>{
            if(item.children.length===0){
              item.children = ""
            }
          })
          setdataSource(list)
       })
    },[])
    const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
          render:(id)=>{
            return <b>{id}</b>
          }
        },
        {
          title: '权限名称',
          dataIndex: 'title',
        },
        {
          title: '权限路径',
          dataIndex: 'key',
          render:(key)=>{
            return <Tag color='orange'>{key}</Tag>
          }
        },
        {
          title: '操作',
          render:(record)=>{
            return <div>
              <Popover content={<div style={{textAlign:"center"}}>
                <Switch checked= {record.pagepermisson} onChange={()=>SwitchMethod(record)}></Switch>
                {/* pagepermission是否存在，不存在的话就禁用 */}
              </div>} title="配置项" trigger={record.pagepermisson === undefined?'':'click'}>
               <Button type="primary" shape="circle" icon={<EditOutlined />} disabled={
                record.pagepermisson === undefined }/>
               {/* 如果没有配置权限，就不显示 */}
               </Popover>
               <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} onClick=
               {()=>confirmMethod(record)}/>
            </div>
          }
        },
      ];

      const SwitchMethod = (record) => {
          record.pagepermisson = record.pagepermisson===1?0:1
          //同步状态  页面
          setdataSource([...dataSource])
          if(record.grade===1){
            // 同步状态  后端 
            axios.patch(`http://localhost:3000/rights/${record.id}`,{
              pagepermisson:record.pagepermisson
            })
          }
          else{
            axios.patch(`http://localhost:3000/children/${record.id}`,{
              pagepermisson:record.pagepermisson
            })
          }
      }
      const confirmMethod = (record) => {
        confirm({
          title: 'Do you Want to delete these items?',
          icon: <ExclamationCircleOutlined />,
          onOk() {
            deleteMethod(record)
          },
          onCancel() {
            console.log('Cancel');
          },
        });
        console.log('确认删除')
      };

      const deleteMethod = (record) => {
        console.log(record);
    
        if (record.grade === 1) {
            // 删除一级权限
            //同步状态  页面
            setdataSource(dataSource.filter(item => item.id !== record.id));
            //同步状态  后端
            axios.delete(`http://localhost:3000/rights/${record.id}`);
        } else {
            // 找到对应的父级权限
            //用map
            let list = dataSource.map(item => {
                if (item.id === record.rightId) {
                    //修正children为数组
                    return {
                        ...item,
                        children: Array.isArray(item.children) ? 
                            item.children.filter(child => child.id !== record.id) 
                            : []
                    };
                }
                return item;
            });
            //同步状态
            setdataSource(list);
            axios.delete(`http://localhost:3000/children/${record.id}`);
        }
    };

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
              //一页显示几条数据
              pageSize:5
            }}/>
        </div>
    );
}

export default RightList;

弹出气泡框的展示，配置成为可选项，同步后端数据， 更改状态，页面刷新

重视配置

上面的那个对话框因为antd只支持react 15 ~ 18，但是我的拉下来的项目的依赖是react19，所以需要改一下

以及如果json-server的版本不对也会出现莫名其妙的bug（数据拉取不过来）

划重点

相关文章：

  • Mybatis日志模块分析--适配器模式+代理模式
  • 身份验证：区块链如何让用户掌控一切
  • Scrapy对比Selenium：哪个最适合您的网络爬虫项目
  • 深度学习Note.5(机器学习2）
  • Unity中UDP异步通信常用API使用
  • Python小练习系列 Vol.7：全排列生成（回溯算法模板题）
  • Spring笔记03-依赖注入
  • Javaweb后端登录认证 登录校验 过滤器 filter令牌校验，执行流程，拦截路径
  • 业之峰与宏图智能战略携手，开启家装数字化新篇章
  • excel 时间戳 转日期
  • shop搜索需求及测试点
  • 01-Docker 安装
  • 知识图谱之知识抽取：从数据海洋中 “捞金”
  • Plastiform复制胶泥：高精度表面复制与测量的高效工具
  • 如何学习Python编程？
  • Emacs 折腾日记(二十)——修改emacs的一些默认行为
  • 三层交换综合实验
  • 【Java SE】StringBuffer、StringBuilder详解
  • 【C++】C++11介绍列表初始化右值引用和移动语义
  • .js项目编译成.exe程序(交叉编译全过程整理)
  • 共绘“彩色上海”，IP SH艺术共创沙龙首期圆满举办
  • 澎湃读报丨解放日报9个版聚焦：上海，加快建成具有全球影响力的科技创新高地
  • 中行一季度净赚超543亿降2.9%，利息净收入降逾4%
  • “麒麟王”亮相上海彩市，体彩即开票“瑞兽家族”迎来新成员
  • 杨国荣︱学术上的立此存照——《故旧往事，欲说还休》读后
  • 看展览｜建造上海：1949年以来的建筑、城市与文化