快捷導(dǎo)航

前端實現(xiàn)列表多條件查詢/搜索功能兩種實現(xiàn)方法

更新時間：2024年08月13日 10:22:54 作者：小金子J

我們在開發(fā)過程中,特別是數(shù)據(jù)庫系統(tǒng)的開發(fā)中經(jīng)常會遇到多條件的查詢狀況這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)列表多條件查詢/搜索功能的兩種實現(xiàn)方法,需要的朋友可以參考下

前言

在前端開發(fā)中，實現(xiàn)一個多條件查詢功能是常見的需求，尤其是在處理表格數(shù)據(jù)時。下面我將通過一個簡單的Vue組件示例，來展示如何實現(xiàn)一個多條件查詢功能。

組件數(shù)據(jù)結(jié)構(gòu)

首先，定義組件的數(shù)據(jù)結(jié)構(gòu)，包括查詢條件和過濾后的表格數(shù)據(jù)：

data() {
  return {
    // 列表搜索條件
    cseAttributeData: {
      parcelCode: "",
      landType: "",
      isIndexesCover: "",
      toSellTaskState: "",
      manageState: "",
      signDownState: "",
      withdrawalWay: ""
    },
    filterTableData: [], // 原始數(shù)據(jù)
    tableData: [] // 過濾后的數(shù)據(jù)
  };
}

方法一：逐個條件過濾

此方法是通過遍歷所有查詢條件，然后對每個條件應(yīng)用過濾函數(shù)。這種方法的好處是邏輯清晰，易于理解。

methods: {
  // 圖層屬性列表查詢按鈕
  cseAttributeDataSubmit() {
    let arr = this.filterTableData;
    // 通過遍歷key值來循環(huán)處理
    Object.keys(this.cseAttributeData).forEach(key => {
      // 調(diào)用篩選方法
      arr = this.filterFunc(this.cseAttributeData[key], key, arr);
    });
    // 為表格賦值
    this.tableData = arr;
  },
  // 篩選方法
  filterFunc(val, target, filterArr) {
    // 參數(shù)不存在或為空時，返回全部數(shù)據(jù)
    if (!val) return filterArr;
    // 應(yīng)用過濾條件
    return filterArr.filter(item => item[target] && item[target].indexOf(val) > -1);
  }
}

方法二：一次性過濾所有條件

此方法是一次性過濾所有條件，這種方法可以減少遍歷次數(shù)，提高效率。

methods: {
  // 圖層屬性列表查詢按鈕
  cseAttributeDataSubmit() {
    this.tableData = this.filterTableData.filter(item => {
      // 遍歷所有查詢條件
      for (const [k, v] of Object.entries(this.cseAttributeData)) {
        if (v) { // 如果條件不為空
          if (!item[k] || !item[k].includes(v)) {
            return false; // 如果當(dāng)前項不包含查詢條件，則過濾掉
          }
        }
      }
      return true; // 如果所有條件都滿足，則保留
    });
  }
}