前端电脑端架构师

思考过程

已完成投诉人下拉选择框的触底分页加载功能，以下是实现方法和使用的组件总结：

## 实现功能

1. 触底加载下一页 ：当下拉列表滚动到底部时，自动请求下一页数据并追加到列表

2. 保持下拉框打开 ：选中投诉人后下拉框保持打开状态，用户点击其他地方才关闭

## 使用的组件和技术

组件/技术 说明 el-select Element UI 下拉选择框，添加了 ref 、 filterable 、 clearable 、 @visible-change 等属性 el-option 下拉选项组件，动态渲染老人列表 滚动事件监听 通过 addEventListener 监听 .el-select-dropdown__wrap 的 scroll 事件 Vue 响应式 使用 data 定义分页状态（ elderlyPageNo 、 elderlyTotal 、 isLoadingElderly ）

## 核心方法

方法名 功能 getElderlyList(isLoadMore) 请求老人列表数据，支持首次加载和分页追加 handleElderlyVisibleChange(visible) 监听下拉框打开/关闭事件，打开时初始化数据 setupElderlyScroll() 设置滚动事件监听器 handleElderlyScroll(e) 滚动触底检测，触发下一页加载 handleOlderChange(val) 投诉人选择事件处理，选中后保持下拉框打开

## 请求参数说明

- 首次加载 ： {"pageNo": 1, "pageSize": 10, "orgType": 10}

- 触底加载 ： {"pageNo": 2, "pageSize": 10, "orgType": 10} （pageNo 自动递增）

## 关键逻辑

1. 当下拉框打开时，触发 @visible-change 事件，调用 getElderlyList(false) 加载第一页

2. 通过 $nextTick 确保 DOM 渲染完成后，找到滚动容器并绑定滚动事件

3. 滚动时检测 scrollTop + clientHeight >= scrollHeight - 10 判断是否触底

4. 触底后调用 getElderlyList(true) 加载下一页，数据追加到现有列表