当前位置：首页 > React

react实现树形权限面板

2026-01-27 12:03:48React

实现思路

树形权限面板通常用于管理系统中的角色权限分配，需要展示层级结构的权限列表，并支持勾选操作。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>
  );
};

react实现树形权限面板