快捷導(dǎo)航

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

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

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

前言

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

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

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

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

方法一：逐個(gè)條件過(guò)濾

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

methods: {
  // 圖層屬性列表查詢按鈕
  cseAttributeDataSubmit() {
    let arr = this.filterTableData;
    // 通過(guò)遍歷key值來(lái)循環(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ù)不存在或?yàn)榭諘r(shí)，返回全部數(shù)據(jù)
    if (!val) return filterArr;
    // 應(yīng)用過(guò)濾條件
    return filterArr.filter(item => item[target] && item[target].indexOf(val) > -1);
  }
}

方法二：一次性過(guò)濾所有條件

此方法是一次性過(guò)濾所有條件，這種方法可以減少遍歷次數(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)前項(xiàng)不包含查詢條件，則過(guò)濾掉
          }
        }
      }
      return true; // 如果所有條件都滿足，則保留
    });
  }
}

總結(jié)

兩種方法各有優(yōu)缺點(diǎn)：

方法一邏輯清晰，易于理解，但可能效率略低。
方法二效率更高，但邏輯稍微復(fù)雜一些。

在選擇實(shí)現(xiàn)方法時(shí)，可以根據(jù)實(shí)際項(xiàng)目需求和數(shù)據(jù)量大小來(lái)決定使用哪種方法。如果數(shù)據(jù)量不大，推薦使用方法一，因?yàn)樗子诰S護(hù)和理解。如果數(shù)據(jù)量較大，或者需要更高效的查詢，可以考慮使用方法二。

注意事項(xiàng)

確保查詢條件不為空時(shí)才進(jìn)行過(guò)濾。
根據(jù)實(shí)際數(shù)據(jù)類型，可能需要對(duì)查詢條件和數(shù)據(jù)進(jìn)行類型轉(zhuǎn)換，比如toLowerCase()。
考慮使用Vue的計(jì)算屬性（computed）來(lái)自動(dòng)更新表格數(shù)據(jù)，以提高性能。

到此這篇關(guān)于前端實(shí)現(xiàn)列表多條件查詢/搜索功能兩種實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)前端列表多條件查詢/搜索功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: