注意:为了避免不必要的http请求,下拉过滤掉这些多频操作,改为本地处理。场景:1、废物名称:(1)下拉列表中的数据是根据表单中的“废物名称”获取的;(2)当下拉选项为“全部”时,返回最原始的数据;2.容器标签:(1)数据需要根据“废物名称”下拉列表的选项;(2)Whentheoptionis"All",returnthecontainerlabeldatainthetable;(3)当option不为“All”时,返回不为“All”的项的标签列表数据;(4)当self选项为“All”时,返回当前不是“All”选项的“Wastename”“Containerlabel”数据;(5)当option为“All”时,self选项也为“All”返回最原始的表单数据;datadata(){return{select:{selevalue2:"All",//废名的默认值selevalue3:"All",//容器标签的默认值},selectArr2:[],//废物名称selectArr3:[],//容器标签tableData:[],//绑定表数据tableData2:[],//表深拷贝数据tableData3:[],//“垃圾名称”选项不等于“全部”表数据};},computed/*垃圾名称*/getWasteName(){constwasteName=Array.from(newSet(this.tableData2.map((item)=>item.wasteName))).map((item)=>{return{value:item};});wasteName.unshift({value:"All"});returnwasteName;},watchwatch:{/*手表垃圾名称选项*/"select.selevalue2"(val){if(val=="All"){this.getTableData(true,这个.tableData2);返回;}constwasteName=this.tableData2.filter((item)=>item.wasteName==val);this.getTableData(false,wasteName);this.tableData=wasteName;this.tableData3=wasteName;//当wastename不是"all"时的表数据},/*listener容器标签选项*/"select.selevalue3"(val){const{selevalue2}=this.select;if(val=="all"){if(selevalue2!="All"){this.tableData=this.tableData3;this.getTableData(false,this.tableData3);返回;}if(selevalue2=="All"){this.getTableData(true,this.tableData2);返回;}else{this.getTableData(true,this.tableData);返回;}}constwasteName=this.tableData.filter((item)=>item.epc==val);this.getTableData(false,wasteName);this.tableData=wasteName;},},methods/*处理数据和容器标签*/getTableData(status=true,data){if(status)this.tableData=this.tableData2;constwasteLabel=Array.from(newSet(data.map((item)=>item.epc))).map((item)=>{return{value:item};});wasteLabel.unshift({value:"全部"});this.selectArr3=wasteLabel;},
