【记录】Vue 多个条件对同一数据过滤处理（本地数据）

说明：
为了避免不必要的 http 请求，下拉筛选这些多频操作，改为本地处理。

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