项目实战--权限列表

后端数据：

用表格实现权限列表

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.datalist[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.datalist[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 {// 找到对应的父级权限//用maplet 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 {// 找到对应的父级权限//用maplet 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（数据拉取不过来）

划重点