场景：
1. 废物名称：
（1）下拉列表数据依据表格的“废物名称”获取到；
（2）当下拉选项为“全副”时返回最原始的数据；
2. 容器标签：
（1）数据要依据“废物名称”下拉列表的选项决定；
（2）当选项为“全副”时返回表格中的容器标签数据；
（3）当选项不为“全副”时返回不为“全副”那项的标签列表数据；
（4）当“容器标签”的选项为“全副”时返回“废物名称”下拉以后项的全副“容器标签”数据；
（5）当“废物名称”选项为“全副”时，“容器标签”的选项也为“全副”时返回最原始的表格数据；
data
data() {
return {
select: {
selevalue2: "全副", // 废物名称默认值
selevalue3: "全副", // 容器标签默认值
},
selectArr2: [], // 废物名称
selectArr3: [], // 容器标签
tableData: [], // 绑定的表格数据
tableData2: [], // 表格深拷贝数据
tableData3: [], //“废物名称”选项不等于“全副”的表格数据};
},computed
/* 废物名称 */
getWasteName() {
const wasteName = Array.from(new Set(this.tableData2.map((item) => item.wasteName))
).map((item) => {return { value: item};
});
wasteName.unshift({value: "全副"});
return wasteName;
},watch
watch:{
/* 监听废物名称选项 */
"select.selevalue2"(val) {if (val == "全副") {this.getTableData(true, this.tableData2);
return;
}
const wasteName = this.tableData2.filter((item) => {return item.wasteName == val;});
this.getTableData(false, wasteName);
this.tableData = wasteName;
this.tableData3 = wasteName; // 废物名称不是“全副”时的表格数据
},
/* 监听容器标签选项 */
"select.selevalue3"(val) {const { selevalue2} = this.select;
if (val == "全副") {if (selevalue2 != "全副") {
this.tableData = this.tableData3;
this.getTableData(false, this.tableData3);
return;
}
if (selevalue2 == "全副") {this.getTableData(true, this.tableData2);
return;
} else {this.getTableData(true, this.tableData);
return;
}
}
const wasteName = this.tableData.filter((item) => {return item.epc == val;});
this.getTableData(false, wasteName);
this.tableData = wasteName;
},
},methods
/* 解决数据与容器标签 */
getTableData(status = true, data) {if (status) this.tableData = this.tableData2;
const wasteLabel = Array.from(new Set(data.map((item) => item.epc))).map((item) => {return { value: item};
}
);
wasteLabel.unshift({value: "全副"});
this.selectArr3 = wasteLabel;
},