场景：
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; },