fix: 修复学生管理学校树无数据显示问题
## 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: [] // 子节点(年级/班级)
}
```
---
作者:湖北新华业务中台研发团队
This commit is contained in:
parent
288193b957
commit
9eb2a54573
|
|
@ -22,7 +22,7 @@
|
|||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
:props="{ label: 'label', children: 'children' }"
|
||||
:props="{ label: 'name', children: 'children' }"
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
@node-click="handleNodeClick"
|
||||
|
|
@ -67,7 +67,7 @@ async function loadTree() {
|
|||
// 过滤节点
|
||||
function filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.label.includes(value)
|
||||
return data.name.includes(value)
|
||||
}
|
||||
|
||||
// 节点点击
|
||||
|
|
|
|||
Loading…
Reference in New Issue