在tab2下拉框中选择检查区域时,检查区域已加载,选中后数据未按已选择的检查区域进行筛选
时间: 2024-11-29 07:38:29 浏览: 8
下拉框选择事件动态加载echart数据
在 `tab2` 中选择检查区域时,虽然检查区域已经加载,但选中后数据没有按照所选择的检查区域进行筛选。这可能是由于 `filterTab2Data` 方法中的过滤条件没有正确应用到 `anotherData.rows` 上。
### 解决方案:
1. **确保 `selectedArea` 值正确传递**:
检查 `selectedArea` 是否在选择时正确更新。可以通过在 `@change` 事件中添加一个 `console.log` 来验证:
```vue
<select v-model="selectedArea" @change="filterTab2Data" class="area-select">
<option value="">请选择检查区域</option>
<option v-for="area in areasTab2" :value="area" :key="area">{{ area }}</option>
</select>
```
在 `methods` 中添加日志输出:
```javascript
methods: {
filterTab2Data() {
console.log('Selected Area:', this.selectedArea);
const taskId = String(this.taskId);
this.anotherData.rows = this.anotherData.originalRows.filter(item => {
return String(item.Main_task_Nopri) === taskId && (!this.selectedArea || item.AREA_NAME === this.selectedArea);
});
},
// 其他方法...
}
```
2. **确保 `anotherData.originalRows` 已经加载**:
确认 `anotherData.originalRows` 在 `fetchTab2Data` 方法中已经被正确加载,并且 `originalRows` 不为空:
```javascript
methods: {
fetchTab2Data() {
request({
url: '/api/check_carryout_record/getPageData',
method: 'POST',
header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` },
dataType: 'json'
}).then(response => {
this.anotherData.originalRows = response.rows.map(item => ({ ...item, complianceStatus: '符合' }));
this.areasTab2 = [...new Set(response.rows.map(item => item.AREA_NAME))];
// 确保在数据加载完成后调用筛选方法
this.filterTab2Data();
}).catch(error => {
console.error(error);
uni.showToast({ title: '请求失败', icon: 'none' });
});
},
// 其他方法...
}
```
3. **检查 `taskId` 是否正确传递**:
确保 `taskId` 在页面加载时已经正确赋值,并且在 `filterTab2Data` 方法中使用的是正确的 `taskId`:
```javascript
methods: {
onLoad(options) {
if (options.id) {
this.taskId = decodeURIComponent(options.id);
}
this.fetchTab1Data();
this.fetchTab2Data();
},
// 其他方法...
}
```
通过以上步骤,可以确保 `selectedArea` 和 `taskId` 正确传递,并且 `filterTab2Data` 方法能够正确地对数据进行筛选。如果问题仍然存在,请进一步检查是否有其他逻辑错误或数据绑定问题。
阅读全文