# 权限树状表格组件使用说明

## 概述

这个权限树状表格组件实现了类似表格的树形权限管理界面，左侧显示树形菜单结构，右侧显示对应的权限复选框，完全符合您截图中的设计需求。

## 文件结构

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