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 组件的默认样式
|