项目实战-角色列表

抄上一次写过的代码：

import React, { useState, useEffect } from "react";
import axios from 'axios';
import { Button, Table, Modal } from 'antd';
import { BarsOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';const { confirm } = Modal;function RoleList() {const [dataSource, setdataSource] = useState([]);useEffect(() => {axios.get('http://localhost:3000/roles').then(res => {setdataSource(res.data);});}, []);const confirmMethod = (record) => {confirm({title: '确定要删除这个角色吗？',icon: <ExclamationCircleOutlined />,onOk() {deleteMethod(record);},onCancel() {console.log('取消删除');},});};const deleteMethod = (record) => {// 先更新本地状态setdataSource(dataSource.filter(item => item.id !== record.id));// 发送删除请求axios.delete(`http://localhost:3000/roles/${record.id}`);};const columns = [{title: 'ID',dataIndex: 'id',render: (id) => <b>{id}</b>,},{title: '角色名称',dataIndex: 'roleName',},{title: "操作",render: (item) => (<div><Button type="primary" shape="circle" icon={<BarsOutlined />} /><Button danger type="primary" shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)}/></div>),}];return (<div><Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} /></div>);
}export default RoleList;

就可以实现一个和后端数据也可以同步的功能了：

我们需要用到树形控件：

还要实现这个弹出框的效果 

import React, { useState, useEffect } from "react";
import axios from 'axios';
import { Button, Table, Modal } from 'antd';
import { BarsOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';const { confirm } = Modal;function RoleList() {const [dataSource, setdataSource] = useState([]);const [isModalVisible, setIsModalVisible] = useState(false);useEffect(() => {axios.get('http://localhost:3000/roles').then(res => {setdataSource(res.data);});}, []);const confirmMethod = (record) => {confirm({title: '确定要删除这个角色吗？',icon: <ExclamationCircleOutlined />,onOk() {deleteMethod(record);},onCancel() {console.log('取消删除');},});};const deleteMethod = (record) => {setdataSource(dataSource.filter(item => item.id !== record.id));axios.delete(`http://localhost:3000/roles/${record.id}`);};const showModal = () => {setIsModalVisible(true);};const handleOk = () => {console.log("点击了确认");setIsModalVisible(false);};const handleCancel = () => {console.log("点击了取消");setIsModalVisible(false);};const columns = [{title: 'ID',dataIndex: 'id',render: (id) => <b>{id}</b>,},{title: '角色名称',dataIndex: 'roleName',},{title: "操作",render: (item) => (<div><Button type="primary" shape="circle" icon={<BarsOutlined />} onClick={showModal} /><Button danger type="primary" shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)}/></div>),}];return (<div><Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} />{/* Modal 组件 */}<Modal title="权限分配" open={isModalVisible} onOk={handleOk} onCancel={handleCancel}><p>这里可以放权限分配的内容</p><p>比如角色权限列表</p><p>或者其他选项</p></Modal></div>);
}export default RoleList;

能显示modal对话框，下一步实现树形结构

tree的使用就是引入一个tree组件，然后数据满足树形结构

这太棒了

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Button, Table, Modal,Tree } from 'antd'
import {BarsOutlined,DeleteOutlined,ExclamationCircleOutlined,
} from '@ant-design/icons'const { confirm } = Modalfunction RoleList() {const [dataSource, setdataSource] = useState([])const [isModalVisible, setIsModalVisible] = useState(false)const [rightList, setRightList] = useState([])useEffect(() => {axios.get('http://localhost:3000/roles').then((res) => {setdataSource(res.data)})}, [])useEffect(() => {axios.get('http://localhost:3000/rights?_embed=children').then((res) => {setRightList(res.data)})}, [])const confirmMethod = (record) => {confirm({title: '确定要删除这个角色吗？',icon: <ExclamationCircleOutlined />,onOk() {deleteMethod(record)},onCancel() {console.log('取消删除')},})}const deleteMethod = (record) => {setdataSource(dataSource.filter((item) => item.id !== record.id))axios.delete(`http://localhost:3000/roles/${record.id}`)}const showModal = () => {setIsModalVisible(true)}const handleOk = () => {console.log('点击了确认')setIsModalVisible(false)}const handleCancel = () => {console.log('点击了取消')setIsModalVisible(false)}const columns = [{title: 'ID',dataIndex: 'id',render: (id) => <b>{id}</b>,},{title: '角色名称',dataIndex: 'roleName',},{title: '操作',render: (item) => (<div><Buttontype="primary"shape="circle"icon={<BarsOutlined />}onClick={showModal}/><Buttondangertype="primary"shape="circle"icon={<DeleteOutlined />}onClick={() => confirmMethod(item)}/></div>),},]return (<div><TabledataSource={dataSource}columns={columns}rowKey={(item) => item.id}/>{/* Modal 组件 */}<Modaltitle="权限分配"open={isModalVisible}onOk={handleOk}onCancel={handleCancel}><Treecheckable treeData={rightList}/></Modal></div>)
}export default RoleList

此后想要实现页面同步和后端的同步：

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Button, Table, Modal,Tree } from 'antd'
import {BarsOutlined,DeleteOutlined,ExclamationCircleOutlined,
} from '@ant-design/icons'const { confirm } = Modalfunction RoleList() {const [dataSource, setdataSource] = useState([])const [isModalVisible, setIsModalVisible] = useState(false)const [rightList, setRightList] = useState([])//默认选中const [currentRights, setCurrentRights] = useState([])const [currentId,setCurrentId] = useState(0)useEffect(() => {axios.get('http://localhost:3000/roles').then((res) => {setdataSource(res.data)})}, [])useEffect(() => {axios.get('http://localhost:3000/rights?_embed=children').then((res) => {setRightList(res.data)})}, [])const confirmMethod = (record) => {confirm({title: '确定要删除这个角色吗？',icon: <ExclamationCircleOutlined />,onOk() {deleteMethod(record)},onCancel() {console.log('取消删除')},})}const deleteMethod = (record) => {setdataSource(dataSource.filter((item) => item.id !== record.id))axios.delete(`http://localhost:3000/roles/${record.id}`)}const showModal = () => {setIsModalVisible(true)//dataSource重新映射}const handleOk = () => {console.log('点击了确认')setIsModalVisible(false)setdataSource(dataSource.map(item=>{if(item.id === currentId){return{...item,rights:currentRights}}else{return item}}))//patchaxios.patch(`http://localhost:3000/roles/${currentId}`,{rights:currentRights})}const handleCancel = () => {console.log('点击了取消')setIsModalVisible(false)}// 选中的权限const onCheck = (checkedKeys, checkedInfo) => {setCurrentRights(checkedKeys)}const columns = [{title: 'ID',dataIndex: 'id',render: (id) => <b>{id}</b>,},{title: '角色名称',dataIndex: 'roleName',},{title: '操作',render: (item) => (<div><Buttontype="primary"shape="circle"icon={<BarsOutlined />}onClick={()=>{setIsModalVisible(true)setCurrentRights(item.rights)setCurrentId(item.id)}}/><Buttondangertype="primary"shape="circle"icon={<DeleteOutlined />}onClick={() => confirmMethod(item)}/></div>),},]return (<div><TabledataSource={dataSource}columns={columns}rowKey={(item) => item.id}/>{/* Modal 组件 */}<Modaltitle="权限分配"open={isModalVisible}onOk={handleOk}onCancel={handleCancel}><Treecheckable treeData={rightList}checkedKeys={currentRights}checkStrictly = {true} onCheck={onCheck}/></Modal></div>)
}export default RoleList

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode1两数之和

LeetCode1两数之和

**思路&#xff1a;**懒得写了&#xff0c;如代码所示 /*** Note: The returned array must be malloced, assume caller calls free().*/ struct hashTable {int key;//存值int val;//存索引UT_hash_handle hh; }; int* twoSum(int* nums, int numsSize, int target, int* re…
阅读更多...
去噪算法大比拼

去噪算法大比拼

目录 效果图： 实现代码： 密集抖动 pip install pykalman 效果图： 实现代码： import numpy as np import cv2 import matplotlib.pyplot as plt from scipy.ndimage import gaussian_filter1d from scipy.signal import butter, filtfilt, savgol_filter from pykalma…
阅读更多...
STM32_HAL开发环境搭建【Keil(MDK-ARM)、STM32F1xx_DFP、 ST-Link、STM32CubeMX】

STM32_HAL开发环境搭建【Keil(MDK-ARM)、STM32F1xx_DFP、 ST-Link、STM32CubeMX】

安装Keil(MDK-ARM)【集成开发环境IDE】 我们会在Keil(MDK-ARM)上去编写代码、编译代码、烧写代码、调试代码。 Keil(MDK-ARM)的安装方法&#xff1a; 教学视频的第02分03秒开始看。 安装过程中请修改一下下面两个路径&#xff0c;避免占用C盘空间。 Core就是Keil(MDK-ARM)的…
阅读更多...
深入理解MySQL聚集索引与非聚集索引

深入理解MySQL聚集索引与非聚集索引

在数据库管理系统中&#xff0c;索引是提升查询性能的关键。MySQL支持多种类型的索引&#xff0c;其中最基础也是最重要的两种是聚集索引和非聚集索引。本文将深入探讨这两种索引的区别&#xff0c;并通过实例、UML图以及Java代码示例来帮助您更好地理解和应用它们。 一、概念…
阅读更多...
【leetcode】拆解与整合：分治并归的算法逻辑

【leetcode】拆解与整合：分治并归的算法逻辑

前言 &#x1f31f;&#x1f31f;本期讲解关于力扣的几篇题解的详细介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废话不…
阅读更多...
wx162基于springboot+vue+uniapp的在线办公小程序

wx162基于springboot+vue+uniapp的在线办公小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…
阅读更多...
陈宛汮签约2025火凤凰风赏大典全球形象大使

陈宛汮签约2025火凤凰风赏大典全球形象大使

原标题&#xff1a;陈宛汮签约2025火凤凰风赏大典全球形象大使 共工新闻社香港3月29日电 陈宛汮&#xff0c;华语原创女歌手。“星宝在闪耀”公益活动联合发起人&#xff0c;自闭症儿童康复推广大使。代表作:《荣耀火凤凰》《爱在醉千年》。 从2025年1月1日至2025年12月31日&a…
阅读更多...
【深度学习入门_机器学习理论】极致梯度提升原理（XGBoost）

【深度学习入门_机器学习理论】极致梯度提升原理（XGBoost）

XGBoost&#xff08;eXtreme Gradient Boosting&#xff09;是一种高效、灵活且广泛应用的机器学习算法&#xff0c;属于梯度提升决策树&#xff08;Gradient Boosting Decision Tree, GBDT&#xff09; 的优化实现。它在分类、回归、排序等结构化/表格数据的预测任务中表现尤为…
阅读更多...
Oracle初识：登录方法、导入dmp文件

Oracle初识：登录方法、导入dmp文件

目录 一、登录方法 以sys系统管理员的身份登录 &#xff0c;无需账户和密码 以账户密码的用户身份登录 二、导入dmp文件 方法一&#xff1a;PLSQL导入dmp文件 一、登录方法 Oracle的登录方法有两种。 以sys系统管理员的身份登录 &#xff0c;无需账户和密码 sqlplus / a…
阅读更多...
STM32F103_LL库+寄存器学习笔记01 - 梳理CubeMX生成的LL库最小的裸机系统框架

STM32F103_LL库+寄存器学习笔记01 - 梳理CubeMX生成的LL库最小的裸机系统框架

《STM32 - 在机器人领域&#xff0c;LL库相比HAL优势明显》在机器人、自动化设备领域使用MCU开发项目&#xff0c;必须用LL库。 本系列笔记记录使用LL库的开发过程&#xff0c;首先通过CubeMX生成LL库代码&#xff0c;梳理LL库源码。通过学习LL库源码&#xff0c;弄清楚寄存器的…
阅读更多...
Vue3当中el-tree树形控件使用

Vue3当中el-tree树形控件使用

tree悬停tooltip效果 文本过长超出展示省略号 如果文本超出悬停显示tooltip效果 反之不显示 这里直接控制固定宽度限制 试了监听宽度没效果<template><el-treeshow-checkbox:check-strictly"true":data"data"node-key"id":props"…
阅读更多...
最大数字（java）(DFS实现)

最大数字（java）(DFS实现)

1.最大数字 - 蓝桥云课 因为N最大是10 的17次方&#xff0c; 所以可以利用字符串来处理输入的数字的每一位 并且是从高到低依次处理的 然后通过函数charAt(i)来获取第i位的字符 再减去‘0’就可以将字符转化为整型了 假设每一位数字都是x 然后通过两种操作 加或者减来操…
阅读更多...
04 单目标定实战示例

04 单目标定实战示例

看文本文，您将获得以下技能： 1：使用opencv进行相机单目标定实战 2：标定结果参数含义和数值分析 3：Python绘制各标定板姿态，查看图像采集多样性 4：如果相机画幅旋转90，标定输入参数该如何设置？ 5：图像尺寸缩放，标定结果输出有何影响？ 6：单目标定结果应用类别…
阅读更多...
手机销售终端MPR+LTC项目项目总体方案P183（183页PPT）（文末有下载方式）

手机销售终端MPR+LTC项目项目总体方案P183（183页PPT）（文末有下载方式）

资料解读&#xff1a;手机销售终端 MPRLTC 项目项目总体方案 详细资料请看本解读文章的最后内容。在当今竞争激烈的市场环境下&#xff0c;企业的销售模式和流程对于其发展起着至关重要的作用。华为终端正处于销售模式转型的关键时期&#xff0c;波士顿 - 华为销售终端 MPRLTC …
阅读更多...
如何在 vue 渲染百万行数据，vxe-table 渲染百万行数据性能对比，超大量百万级表格渲染

如何在 vue 渲染百万行数据，vxe-table 渲染百万行数据性能对比，超大量百万级表格渲染

vxe-table 渲染百万行数据性能对比&#xff0c;超大量百万级表格渲染&#xff1b;如何在 vue 渲染百万行数据&#xff1b;当在开发项目时&#xff0c;遇到需要流畅支持百万级数据的表格时&#xff0c; vxe-table 就可以非常合适了&#xff0c;不仅支持强大的功能&#xff0c;虚…
阅读更多...
ubuntu24 部署vnc server 使用VNC Viewer连接

ubuntu24 部署vnc server 使用VNC Viewer连接

前提条件 已创建一台Ubuntu 24.04(20.22通用)操作系统的云服务器&#xff0c;并且为云服务器绑定弹性公网IP&#xff0c;确保可以连接互联网。 已在本地PC安装VNC Viewer客户端。 操作步骤 服务器内安装vnc server以及桌面环境 apt update sudo apt install xfce4 xfce4-…
阅读更多...
【数据结构】栈 与【LeetCode】20.有效的括号详解

【数据结构】栈 与【LeetCode】20.有效的括号详解

目录 一、栈1、栈的概念及结构2、栈的实现3、初始化栈和销毁栈4、打印栈的数据5、入栈操作---栈顶6、出栈---栈顶6.1栈是否为空6.2出栈---栈顶 7、取栈顶元素8、获取栈中有效的元素个数 二、栈的相关练习1、练习2、AC代码 个人主页&#xff0c;点这里~ 数据结构专栏&#xff0c…
阅读更多...
06-SpringBoot3入门-常见注解（简介）

06-SpringBoot3入门-常见注解（简介）

1、Controller ResponseBody Controller是Spring MVC 中的注解&#xff0c;负责处理 HTTP 请求。 ResponseBody是Spring MVC 中的注解&#xff0c;用于直接将方法的返回值作为 HTTP 响应体。 2、RestController RestController Controller ResponseBody 3、RequestMappin…
阅读更多...
工作记录 2017-03-10

工作记录 2017-03-10

工作记录 2017-03-10 序号 工作 相关人员 1 修改邮件上的问题。 更新RD服务器。 郝 更新的问题 1、修改了payment detail和patient insurance的health plan的输入方式。 2、new payment detail时&#xff0c;增加了allowable的处理。 3、选择payer的窗体&#xff0c;增…
阅读更多...
MySQL数据库和表的操作

MySQL数据库和表的操作

#使用数据库 use 数据库名; # 查询当前数据库是哪个数据库 select database(); 查看数据库版本 SELECT VERSION(); 查看当前用户 SELECT USER(); 查看所有用户() SELECT User,Host,Password FROM mysql.user;数据库 MySQL自带数据库&#xff1a; Information_schema: 主要存储…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023