在tab2中加入一个下拉框，下拉框内的选项为从接口获取到的数据中的检查区域，通过这个下拉框来对tab1获取的数据通过检查区域进行筛选

要在 `tab2` 中加入一个下拉框，并使用该下拉框对 `tab1` 获取的数据按检查区域进行筛选，可以按照以下步骤进行： ### 1. 修改 HTML 结构 在 `tab2` 区域中添加一个下拉框，并绑定相应的事件处理函数。 ```html <!-- 在 tab2 区域中添加下拉框 --> <select v-model="selectedArea" @change="filterByArea"> <option value="">请选择检查区域</option> <option v-for="area in areas" :value="area" :key="area">{{ area }}</option> </select> <!-- 其他现有代码保持不变 --> ``` ### 2. 修改 Vue 组件的数据和方法 在 Vue 组件的 `data` 和 `methods` 中添加新的属性和方法。 ```javascript <script> import request from '@/utils/request'; import { getToken } from '@/utils/auth'; export default { data() { return { currentTab: 'tab1', tab1Data: { status: null, rows: [], originalRows: [], }, taskId: '', anotherData: { status: null, rows: [], originalRows: [] }, isModalVisible: false, selectedItem: { name: '', complianceStatus: '符合', // 默认值为“符合” hazardDescription: '' }, selectedArea: '', // 新增：用于存储当前选择的检查区域 areas: [] // 新增：用于存储所有检查区域的列表 }; }, methods: { fetchTab1Data() { request({ url: '/api/check_carryout_record_daily/getPageData', method: 'POST', header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` }, data: {}, dataType: 'json' }).then(response => { this.tab1Data.originalRows = response.rows.map(item => ({ ...item, complianceStatus: '符合' // 设置默认值 })); this.filterData(this.tab1Data); }).catch(error => { console.error(error); uni.showToast({ title: '请求失败', icon: 'none' }); }); }, 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.filterTab2Data(this.anotherData); // 新增：提取所有检查区域并去重 this.areas = [...new Set(response.rows.map(item => item.AREA_NAME))]; }).catch(error => { console.error(error); uni.showToast({ title: '请求失败', icon: 'none' }); }); }, filterData(data) { const taskId = String(this.taskId); data.rows = data.originalRows.filter(item => { return String(item.Main_task_Nopri) === taskId && (!this.selectedArea || item.AREA_NAME === this.selectedArea); }); }, filterTab2Data(data) { const taskId = String(this.taskId); data.rows = data.originalRows.filter(item => { return String(item.Main_task_Nopri) === taskId; }); }, showDetail(item) { this.selectedItem = { ...item }; this.isModalVisible = true; }, closeModal() { this.isModalVisible = false; }, updateItem() { request({ url: '/api/update_item', method: 'POST', header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` }, data: this.selectedItem, dataType: 'json' }).then(response => { this.closeModal(); this.fetchTab1Data(); // 重新加载数据 uni.showToast({ title: '更新成功', icon: 'success' }); }).catch(error => { console.error(error); uni.showToast({ title: '更新失败', icon: 'none' }); }); }, handleComplianceChange(item) { // 单选框变化时的处理逻辑 // 如果需要，可以在这里添加额外的逻辑 }, filterByArea() { // 当检查区域发生变化时，重新过滤 tab1 数据 this.filterData(this.tab1Data); }, onLoad(options) { if (options.id) { this.taskId = decodeURIComponent(options.id); } this.fetchTab1Data(); this.fetchTab2Data(); }, mounted() {} } }; </script> ``` ### 3. 更新样式（可选） 如果需要，可以为新添加的下拉框添加一些样式。 ```css <style lang="scss"> /* 其他现有样式保持不变 */ .select-area { width: 300px; /* 根据需要调整宽度 */ height: 25px; margin-bottom: 10px; } </style> ``` ### 总结 - **HTML**: 在 `tab2` 区域中添加了一个下拉框，并绑定了 `v- 在 `data` 中新增了 `selectedArea` 和 `areas` 属性。 - 在 `fetchTab2Data` 方法中提取了所有检查区域并去重。 - 在 `filterData` 方法中增加了按检查区域的筛选条件。 - 新增了 `filterByArea` 方法，当检查区域发生变化时重新过滤 `tab1` 数据。 这样，你就可以通过下拉框选择检查区域，并对 `tab1` 获取的数据进行筛选。