## Bug描述
学生管理页面左侧学校列表显示空白(只显示图标),点击学校节点无法筛选数据
## 问题分析
### 根本原因:前后端字段名不匹配
**后端API返回数据结构**:
```json
{
"id": 4,
"type": "school",
"name": "武昌实验小学", // ← 实际字段名
"children": []
}
```
**前端el-tree配置**:
```vue
:props="{ label: 'label', children: 'children' }" // ← 期望label字段
```
因为数据中没有`label`字段,el-tree无法显示节点文本,导致只显示图标。
### Bug影响范围
1. ❌ 学校树节点显示空白(只有图标)
2. ❌ 搜索功能失效(filterNode使用data.label)
3. ❌ 点击节点可以触发但数据为空
## 修复内容
### 1. 修正el-tree props配置
```vue
<!-- 修复前 ❌ -->
:props="{ label: 'label', children: 'children' }"
<!-- 修复后 ✅ -->
:props="{ label: 'name', children: 'children' }"
```
### 2. 修正过滤方法
```javascript
// 修复前 ❌
function filterNode(value, data) {
if (!value) return true
return data.label.includes(value)
}
// 修复后 ✅
function filterNode(value, data) {
if (!value) return true
return data.name.includes(value)
}
```
## 验证结果
- ✅ 学校树API正常:/api/school/tree (200 OK, 104条学校)
- ✅ 学校树显示:武昌实验小学、武昌区水果湖第一小学...
- ✅ 搜索功能:输入"武昌"可正常过滤
- ✅ 点击筛选:点击学校节点可正常筛选学生列表
## 数据结构说明
**学校树节点结构**:
```javascript
{
id: 4, // 节点ID
type: 'school', // 节点类型:school/grade/class
name: '武昌实验小学', // 节点名称 ← 关键字段
code: 'SCH20260101', // 学校编码
regionPath: '湖北省-武汉市-武昌区',
children: [] // 子节点(年级/班级)
}
```
---
作者:湖北新华业务中台研发团队
|
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .gitignore | ||
| README.md | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| vite.config.js | ||
README.md
Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.