222 lines
4.8 KiB
Markdown
222 lines
4.8 KiB
Markdown
# 权限树状表格组件使用说明
|
||
|
||
## 概述
|
||
|
||
这个权限树状表格组件实现了类似表格的树形权限管理界面，左侧显示树形菜单结构，右侧显示对应的权限复选框，完全符合您截图中的设计需求。
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
src/views/system/user/role/
|
||
├── render.vue # 核心权限树状表格组件
|
||
├── permission-dialog.vue # 权限选择对话框组件
|
||
├── permission-example.vue # 完整使用示例
|
||
└── README.md # 使用说明
|
||
```
|
||
|
||
## 核心功能
|
||
|
||
### 1. 树状表格展示
|
||
- 表格样式的树形结构展示
|
||
- 支持多级树形结构
|
||
- 可展开/收起节点
|
||
- 支持节点复选框选择（含半选状态）
|
||
|
||
### 2. 权限复选框管理
|
||
- 每个节点可以配置独立的权限项
|
||
- 权限项以复选框形式展示在右侧
|
||
- 支持权限项的选中状态管理
|
||
- 支持热门权限标记
|
||
|
||
### 3. 表格式布局
|
||
- 左侧：菜单名称列（支持树形缩进）
|
||
- 右侧：权限操作列（权限复选框）
|
||
- 表格头部标题
|
||
- 行分隔线和悬停效果
|
||
|
||
## 数据结构
|
||
|
||
```javascript
|
||
const treeData = [
|
||
{
|
||
id: 1, // 节点唯一标识
|
||
label: '开站管理', // 节点显示名称
|
||
children: [ // 子节点（可选）
|
||
{
|
||
id: 11,
|
||
label: '待审核',
|
||
perms: [] // 权限列表（可选）
|
||
},
|
||
{
|
||
id: 12,
|
||
label: '待付款',
|
||
perms: [ // 权限项配置
|
||
{
|
||
key: 'pay',
|
||
label: '付款',
|
||
checked: false
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 15,
|
||
label: '已上线',
|
||
perms: [
|
||
{
|
||
key: 'add_brand',
|
||
label: '新增子品牌',
|
||
checked: false,
|
||
isHot: true // 热门权限标记
|
||
},
|
||
{
|
||
key: 'edit',
|
||
label: '修改',
|
||
checked: false
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 1. 基础使用
|
||
|
||
```vue
|
||
<template>
|
||
<PermissionTreeTable ref="treeTableRef" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import PermissionTreeTable from './render.vue'
|
||
|
||
const treeTableRef = ref()
|
||
|
||
// 获取选中的数据
|
||
const getSelectedData = () => {
|
||
if (treeTableRef.value) {
|
||
return treeTableRef.value.getCheckedData()
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 2. 对话框形式使用
|
||
|
||
```vue
|
||
<template>
|
||
<PermissionDialog
|
||
v-model="dialogVisible"
|
||
:role-id="currentRoleId"
|
||
@confirm="handlePermissionConfirm"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import PermissionDialog from './permission-dialog.vue'
|
||
|
||
const dialogVisible = ref(false)
|
||
const currentRoleId = ref(1)
|
||
|
||
const handlePermissionConfirm = (data) => {
|
||
console.log('选中的权限:', data)
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 样式说明
|
||
|
||
### 1. 表格式布局
|
||
- 使用 CSS Grid 布局实现表格效果
|
||
- 左列：菜单名称（固定宽度 300px）
|
||
- 右列：权限操作（自适应宽度）
|
||
- 表格头部和内容分离
|
||
|
||
### 2. 主要样式类名
|
||
- `.permission-tree-table`: 组件容器
|
||
- `.table-header`: 表格头部
|
||
- `.table-content`: 表格内容区域
|
||
- `.table-row`: 每行的容器
|
||
- `.row-left`: 左侧菜单名称区域
|
||
- `.row-right`: 右侧权限操作区域
|
||
- `.expand-icon`: 展开/收起图标
|
||
- `.hot-tag`: 热门权限标记
|
||
|
||
### 3. 核心样式
|
||
```css
|
||
.permission-tree-table {
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-header {
|
||
display: grid;
|
||
grid-template-columns: 300px 1fr;
|
||
background: #f5f7fa;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.table-row {
|
||
display: grid;
|
||
grid-template-columns: 300px 1fr;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.table-row:hover {
|
||
background-color: #f5f7fa;
|
||
}
|
||
```
|
||
|
||
## API 说明
|
||
|
||
### Props
|
||
- `modelValue`: 对话框显示状态（仅对话框组件）
|
||
- `roleId`: 角色ID（可选）
|
||
|
||
### Events
|
||
- `confirm`: 确认选择权限时触发，返回选中的权限数据
|
||
|
||
### Methods
|
||
- `getCheckedData()`: 获取当前选中的数据
|
||
- 返回格式：
|
||
```javascript
|
||
{
|
||
checkedNodes: [ // 选中的节点
|
||
{ id: 1, label: '开站管理' }
|
||
],
|
||
checkedPermissions: { // 选中的权限
|
||
"12": [
|
||
{ key: 'pay', label: '付款' }
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
## 扩展功能
|
||
|
||
### 1. 权限标记
|
||
可以为特定权限添加标记（如"热门"标记）：
|
||
|
||
```javascript
|
||
const isHot = perm === '新增子品牌'
|
||
// 在渲染时添加标记
|
||
h('span', { class: 'hot-tag' }, '热')
|
||
```
|
||
|
||
### 2. 权限分组
|
||
可以通过树形结构对权限进行分组管理。
|
||
|
||
### 3. 权限搜索
|
||
可以添加搜索功能来快速定位特定权限。
|
||
|
||
## 注意事项
|
||
|
||
1. 确保每个节点的 `id` 唯一
|
||
2. `perms` 数组为空时不会显示权限复选框
|
||
3. 权限状态通过 `permissionState` 响应式对象管理
|
||
4. 使用 `:deep()` 选择器来修改 Element Plus 组件的默认样式
|