---
date: 2026-05-07
type: frontend-bug
module: resource-scenic-batch-status
priority: low
notify: ["@mmg"]
status: pending
source: 测试用例汇总.xlsx (2026-05-07)
related_cases: [JQ-024]
---

# 景区批量改状态下拉框 v-model 显示不同步

## 现象

测试用例 JQ-024：

> 1. 勾选多个景区
> 2. 点击"批量更改状态"
> 3. 在下拉框里选择"下架"
> 4. **下拉框显示的还是"上架"**（用户选的"下架"看不到）
> 5. 点确定 → 实际状态改成下架（功能本身正常）

测试人备注："**功能正常，但有小问题**"。

## 根因（推断）

el-select / n-select 的 **v-model 异步同步问题**，跟 memory `experience/backend-dev/nselect-tag-mode-stringify-race.md` 类似但场景不同。

可能的代码模式：

```vue
<el-select v-model="batchStatus" placeholder="请选择">
  <el-option label="上架" value="UP" />
  <el-option label="下架" value="DOWN" />
</el-select>
```

如果 `batchStatus` 在 `el-dialog` open 前没初始化（或 dialog 复用时没 reset），v-model 拿不到当前 option 对应的 label，下拉框就显示前一次的值。

或者 `batchStatus` 是从父组件 `props` 传入但没用 `v-model:`（双向绑定缺一半）。

## 修复方向（前端）

### 检查点

```js
// 1. dialog 打开时显式重置 batchStatus
function openBatchDialog() {
  batchStatus.value = ''  // 或 null
  dialogVisible.value = true
}

// 2. 选项改变时确保赋值
function handleStatusChange(val) {
  batchStatus.value = val  // 不要在这里做条件赋值
}

// 3. 检查是不是用了 v-model:value 而不是 v-model
<el-select v-model="batchStatus">  // 正确
<el-select :value="batchStatus" @input="batchStatus = $event">  // 漏了 input 事件就坏
```

## 影响

- 不阻断业务（用户能选成功，确定后状态对）
- 仅显示层 BUG，体验问题

## 验收

- [ ] 打开批量改状态 dialog，下拉框选项默认空
- [ ] 选"下架" → 下拉框显示"下架"
- [ ] 关掉重开 dialog → 下拉框回到空
