react实现树形权限面板
实现思路
树形权限面板通常用于管理系统中的角色权限分配，需要展示层级结构的权限列表，并支持勾选操作。React 结合第三方库如 antd 的 Tree 组件可以高效实现。
安装依赖
确保项目中已安装 antd 和 react：
npm install antd @ant-design/icons数据结构设计
权限数据通常为嵌套结构，示例：
const treeData = [
{
title: '系统管理',
key: 'sys',
children: [
{ title: '用户管理', key: 'user' },
{ title: '角色管理', key: 'role' },
],
},
{
title: '内容管理',
key: 'content',
children: [
{ title: '文章管理', key: 'article' },
{ title: '评论管理', key: 'comment' },
],
},
];组件实现
使用 Tree 组件渲染树形结构，并处理勾选逻辑：
import React, { useState } from 'react';
import { Tree } from 'antd';
const PermissionTree = ({ initialCheckedKeys, onCheck }) => {
const [checkedKeys, setCheckedKeys] = useState(initialCheckedKeys || []);
const handleCheck = (selectedKeys) => {
setCheckedKeys(selectedKeys);
onCheck(selectedKeys);
};
return (
<Tree
checkable
treeData={treeData}
checkedKeys={checkedKeys}
onCheck={handleCheck}
/>
);
};
export default PermissionTree;父子组件交互
在父组件中调用并处理权限提交：
const App = () => {
const handlePermissionChange = (checkedKeys) => {
console.log('当前选中权限:', checkedKeys);
};
return (
<PermissionTree
initialCheckedKeys={['user', 'article']}
onCheck={handlePermissionChange}
/>
);
};自定义样式与功能扩展
- 图标增强：通过
icon属性为节点添加图标。 - 半选状态：使用
halfCheckedKeys处理部分选中状态。 - 搜索过滤：结合
Input组件实现树节点搜索功能。
性能优化
- 虚拟滚动：对大型树数据启用
virtualScroll属性。 - 动态加载：通过
loadData属性实现懒加载子节点。
完整示例代码
整合后的完整实现可参考以下结构：
import React, { useState } from 'react';
import { Tree, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
const PermissionTree = ({ data, checkedKeys, onChange }) => {
const [searchValue, setSearchValue] = useState('');
const filteredData = data.map(item => ({
...item,
children: item.children.filter(child =>
child.title.toLowerCase().includes(searchValue.toLowerCase())
),
}));
return (
<div>
<Input
prefix={<SearchOutlined />}
placeholder="搜索权限"
onChange={(e) => setSearchValue(e.target.value)}
/>
<Tree
checkable
treeData={filteredData}
checkedKeys={checkedKeys}
onCheck={onChange}
/>
</div>
);
};
