项目实战--权限列表

news2025/4/1 0:48:58

后端数据：

用表格实现权限列表

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（数据拉取不过来）

划重点

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2324389.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

若依赖前端处理后端返回的错误状态码

若依赖前端处理后端返回的错误状态码

【背景】 后端新增加了一个过滤器&#xff0c;用来处理前端请求中的session 若依赖存放过滤器的目录&#xff1a;RuoYi-Vue\ruoyi-framework\src\main\java\com\ruoyi\framework\security\filter\ 【问题】 后端返回了一个状态码为403的错误&#xff0c;现在前端需要处理这…
阅读更多...
【计网】数据包

【计网】数据包

期末复习自用的&#xff0c;处理得比较草率&#xff0c;复习的同学或者想看基础的同学可以看看&#xff0c;大佬的话可以不用浪费时间在我的水文上了 1.数据包的定义&#xff1a; 数据包是网络通信中的基本单元&#xff0c;它包含了通过网络传输的所有必要信息。数据包的结构…
阅读更多...
web权限划分提权和移权

web权限划分提权和移权

前言&#xff1a;权限的基本认知 渗透权限划分&#xff1a;假如我们通过弱口令进入到web的后台 这样我们就拿到了web的管理员权限 管理员权限是web中最高的权限&#xff08;一般我们进入web的时候数据库会进行用户权限的划分&#xff1a;假设 0-10为最高的权限 11-10000为普通…
阅读更多...
LocalDateTime序列化总结

LocalDateTime序列化总结

版权说明&#xff1a; 本文由CSDN博主keep丶原创&#xff0c;转载请保留此块内容在文首。 原文地址&#xff1a; https://blog.csdn.net/qq_38688267/article/details/146703276 文章目录 1.背景2.序列化介绍常见场景关键问题 3.总体方案4.各场景实现方式WEB接口EasyExcelMybat…
阅读更多...
[ 春秋云境 ] Initial 仿真场景

[ 春秋云境 ] Initial 仿真场景

文章目录 靶标介绍&#xff1a;外网内网信呼oa永恒之蓝hash传递 靶标介绍&#xff1a; Initial是一套难度为简单的靶场环境&#xff0c;完成该挑战可以帮助玩家初步认识内网渗透的简单流程。该靶场只有一个flag&#xff0c;各部分位于不同的机器上。 外网 打开给的网址, 有一…
阅读更多...
unity 截图并且展现在UI中

unity 截图并且展现在UI中

using UnityEngine; using UnityEngine.UI; using System.IO; using System.Collections.Generic; using System; using System.Collections;public class ScreenshotManager : MonoBehaviour {[Header("UI 设置")]public RawImage latestScreenshotDisplay; // 显示…
阅读更多...
中断管理常用API（四）

中断管理常用API（四）

一、request_irq(...) request_irq 函数主要用于硬中断相关操作&#xff0c;它的核心作用是把一个中断处理函数和特定的中断号进行绑定。当硬件设备触发该中断号对应的中断时&#xff0c;内核就会调用绑定的中断处理函数&#xff0c;像 irqhandler_func 这类。 此函数在多种硬件…
阅读更多...
pyspark学习rdd处理数据方法——学习记录

pyspark学习rdd处理数据方法——学习记录

python黑马程序员 """ 文件&#xff0c;按JSON字符串存储 1. 城市按销售额排名 2. 全部城市有哪些商品类别在售卖 3. 上海市有哪些商品类别在售卖 """ from pyspark import SparkConf, SparkContext import os import jsonos.environ[PYSPARK_P…
阅读更多...
【HTML 基础教程】HTML ＜head＞

【HTML 基础教程】HTML ＜head＞

HTML <head> 查看在线实例 - 定义了HTML文档的标题"><title> - 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 - 定义了所有链接的URL"><base> - 定义了所有链接的URL 使用 <base> 定义页面中所有链接默认的链接目…
阅读更多...
混合知识表示系统框架python示例

混合知识表示系统框架python示例

前文我们已经深入学习了框架表示法、产生式规则和一阶谓词逻辑，并对它们进行了深度对比，发现它们在不同的应用场景下各有优缺点。 一阶谓词逻辑适合复杂逻辑推理场景，具有数学定理证明、形式化系统规范的优点；产生式规则适合动态决策系统，支持实时决策（如风控、诊断），规…
阅读更多...
MATLAB 控制系统设计与仿真 - 30

MATLAB 控制系统设计与仿真 - 30

用极点配置设计伺服系统 方法2-反馈修正 如果我们想只用前馈校正输入&#xff0c;从而达到伺服控制的效果&#xff0c;我们需要很精确的知道系统的参数模型&#xff0c;否则系统输出仍然具有较大的静态误差。 但是如果我们在误差比较器和系统的前馈通道之间插入一个积分器&a…
阅读更多...
Baklib知识中台驱动智能架构升级

Baklib知识中台驱动智能架构升级

构建四库体系驱动架构升级 在数字化转型过程中&#xff0c;企业普遍面临知识资源分散、隐性经验难以沉淀的痛点。Baklib通过构建知识库、案例库、流程库及资源库四层核心体系&#xff0c;为知识中台搭建起结构化基础框架。知识库以AI分类引擎实现文档标签化存储&#xff0c;案…
阅读更多...
IP第一次笔记

IP第一次笔记

一、TCP协议 第0步&#xff1a;如果浏览器和host文件存在域名对应的P地址记录关系 则直接封装HTTP数据报文&#xff0c;如果没有记录则触发DNS解析获 取目标域名对应的P地址 第一步&#xff1a;终端主机想服务器发起TCP三次握手 1.TCP的三次握手 2.传输网页数据 HTTP --应用层…
阅读更多...
vue3实现router路由

vue3实现router路由

说明&#xff1a; vue3实现router路由 效果图&#xff1a; step1:项目结构 src/ ├── views/ │ ├── Home.vue │ └── User.vue ├── router/ │ └── index.js ├── App.vue └── main.jsstep2:左边路由列表C:\Users\wangrusheng\PycharmProjects\un…
阅读更多...
1500 字节 MTU | 溯源 / 技术权衡 / 应用影响

1500 字节 MTU | 溯源 / 技术权衡 / 应用影响

注&#xff1a;本文为 “MTU 字节” 相关文章合辑。 机翻&#xff0c;未校。 讨论部分&#xff0c;以提交人为分界。 单行只有阿拉伯数字的&#xff0c;为引文转译时对回复的点赞数。 How 1500 bytes became the MTU of the internet 1500 字节是如何成为互联网 MTU 的 Fe…
阅读更多...
智能仪表板DevExpress Dashboard v24.2新版亮点：支持.NET 9

智能仪表板DevExpress Dashboard v24.2新版亮点：支持.NET 9

使用DevExpress BI Dashboard&#xff0c;再选择合适的UI元素&#xff08;图表、数据透视表、数据卡、计量器、地图和网格&#xff09;&#xff0c;删除相应参数、值和序列的数据字段&#xff0c;就可以轻松地为执行主管和商业用户创建有洞察力、信息丰富的、跨平台和设备的决策…
阅读更多...
【数据结构】二叉树的递归

【数据结构】二叉树的递归

数据结构系列三&#xff1a;二叉树(二) 一、递归的原理 1.全访问 2.主角 3.返回值 4.执等 二、递归的化关系思路 三、递归的方法设计 一、递归的原理 1.全访问 方法里调用方法自己&#xff0c;就会形成调用方法本身的一层一层全新相同的调用&#xff0c;方法的形参设置…
阅读更多...
Intellij ider部署python项目教程

Intellij ider部署python项目教程

自己写了一个python项目【mac电脑】&#xff0c;然后用Intellij ider打开&#xff0c;配置python解释器&#xff0c;然后一运行&#xff0c;一直报错&#xff0c; If this fails your Python may not be configured for Tk ModuleNotFoundError: No module named _tkinter 各…
阅读更多...
Linux进程状态补充(10)

Linux进程状态补充(10)

文章目录 前言一、阻塞二、挂起三、运行R四、休眠D五、四个重要概念总结 前言 上篇内容大家看的云里雾里&#xff0c;这实在是正常不过&#xff0c;因为例如 写实拷贝 等一些概念的深层原理我还没有讲解&#xff0c;大家不用紧张&#xff0c;我们继续往下学习就行&#xff01;&…
阅读更多...
基于Python深度学习的鲨鱼识别分类系统

基于Python深度学习的鲨鱼识别分类系统

摘要&#xff1a;鲨鱼是海洋环境健康的指标&#xff0c;但受到过度捕捞和数据缺乏的挑战。传统的观察方法成本高昂且难以收集数据&#xff0c;特别是对于具有较大活动范围的物种。论文讨论了如何利用基于媒体的远程监测方法&#xff0c;结合机器学习和自动化技术&#xff0c;来…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023