Front-end implementation of two implementation methods for list multi-condition query/search function

Preface

In front-end development, implementing a multi-condition query function is a common requirement, especially when processing table data. Below I will use a simple Vue component example to show how to implement a multi-condition query function.

Component data structure

First, define the data structure of the component, including query conditions and filtered tabular data:

data() {
  return {
    // List search criteria    cseAttributeData: {
      parcelCode: "",
      landType: "",
      isIndexesCover: "",
      toSellTaskState: "",
      manageState: "",
      signDownState: "",
      withdrawalWay: ""
    },
    filterTableData: [], // Raw data    tableData: [] // Filtered data  };
}

Method 1: Filter conditionally

This method is by traversing all query conditions and then applying a filter function to each condition. The advantage of this approach is that it is clear logic and easy to understand.

methods: {
  // Layer attribute list query button  cseAttributeDataSubmit() {
    let arr = ;
    // Loop by traversing the key value    ().forEach(key => {
      // Call the filter method      arr = ([key], key, arr);
    });
    // Assign values ​​to the table     = arr;
  },
  // Filter method  filterFunc(val, target, filterArr) {
    // When the parameter does not exist or is empty, all data will be returned    if (!val) return filterArr;
    // Apply filter conditions    return (item => item[target] && item[target].indexOf(val) > -1);
  }
}

Method 2: Filter all conditions at once

This method is to filter all conditions at once, which can reduce the number of traversals and improve efficiency.

methods: {
  // Layer attribute list query button  cseAttributeDataSubmit() {
     = (item => {
      // traverse all query conditions      for (const [k, v] of ()) {
        if (v) { // If the condition is not empty          if (!item[k] || !item[k].includes(v)) {
            return false; // If the current item does not contain query conditions, filter out          }
        }
      }
      return true; // If all conditions are met, then    });
  }
}

Summarize

Both methods have their own advantages and disadvantages:

• Method one is logically clear and easy to understand, but may be slightly inefficient.
• Method 2 is more efficient, but the logic is slightly more complicated.

When choosing an implementation method, you can decide which method to use based on the actual project requirements and the amount of data. If the data volume is not large, it is recommended to use it as it is easier to maintain and understand. If the data volume is large or more efficient query is required, you can consider using Method 2.

Things to note

• Make sure that the query conditions are not empty before filtering.
• Depending on the actual data type, it may be necessary to type convert the query conditions and data, such astoLowerCase()。
• Consider using Vue's computed properties to automatically update table data to improve performance.

This is the article about the two implementation methods of front-end implementation list multi-condition query/search function. For more related front-end list multi-condition query/search function content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!