关于前端:vue两个条件对同一份数据进行过滤处理

9次阅读

共计 1614 个字符,预计需要花费 5 分钟才能阅读完成。

场景:
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;
    },
正文完
 0