Vue filters the same data under two conditions

Time:2021-9-16

Vue filters the same data under two conditions

explain:
In order to avoid unnecessary HTTP requests, pull-down filter these multi frequency operations and change them to local processing.

Scenario:
1. Name of waste:
(1) The drop-down list data is obtained according to the “waste name” of the table;
(2) When the drop-down option is “all”, the most original data is returned;

2. Container label:
(1) The data shall be determined according to the options in the “waste name” drop-down list;
(2) When the option is “all”, return the container label data in the table;
(3) When the option is not “all”, the tag list data of the item not “all” is returned;
(4) When the self option is “all”, return the “container label” data whose “waste name” is not currently “all”;
(5) When the option is “all”, the original table data is returned when its own option is also “all”;

data

data() {
    return {
      select: {
        Selevalue2: "all", // default value of waste name
        Selevalue3: "all", // default value of container label
      },
      Selectarr2: [], // waste name
      Selectarr3: [], // container label
      Tabledata: [], // bound table data
      Tabledata2: [], // table deep copy data
      Tabledata3: [], // "waste name" option is not equal to "all" table data
    };
  },

computed

/*Waste name*/
    getWasteName() {
      const wasteName = Array.from(
        new Set(this.tableData2.map((item) => item.wasteName))
      ).map((item) => {
        return { value: item };
      });
      Wastename. Unshift ({value: "all"});
      return wasteName;
    },

watch

watch:{
   /*Monitor waste name options*/
    "select.selevalue2"(val) {
      If (Val = = "all"){
        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; // Tabular data when the waste name is not "all"
    },
    
    /*Listen container label options*/
    "select.selevalue3"(val) {
      const { selevalue2 } = this.select;
      If (Val = = "all"){
        If (selevalue2! = "all"){
          this.tableData = this.tableData3;
          this.getTableData(false, this.tableData3);
          return;
        }
        If (selevalue2 = = "all"){
          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

/*Process data and container labels*/
    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: "all"});
      this.selectArr3 = wasteLabel;
    },

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]