场景:
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;
},
发表回复